jQuery mouseenter适用于鼠标，但不适用tab键

Question

$( "#list li:eq(0)" ).bind('mouseenter focus', function(event) {
jQuery("#logo img").css('top', '-132px');
console.log( event.type, " :: ", this.id );
  }).bind('blur mouseleave', function(event) {
jQuery("#logo img").css('top', '-41px');
console.log( event.type, " :: ", this.id );
  });  

这段jQuery在鼠标上工作得很好，但在标签键上就不行!你遇到过类似的问题吗?

我已经尝试了。bind来触发两个事件，但仍然不工作!

if触发mouseenter事件，但没有焦点!

Answer 1

mouseenter和mouseleave与键盘事件无关，并且当元素获得键盘focus时不会触发。

要让您的代码同时对mouseenter和focus开火，这更接近:

$("#MesActivites li:eq(0)").bind("mouseenter focus", function (event) {
    jQuery("#MesActivites ul:eq(1)").css('top', '45px').css('left', '-1px');
    jQuery("#rfr-header-logo").css('display', 'none');
    console.log(event.type, " :: ", this.id);
}).bind("mouseleave blur", function (event) {
    jQuery("#MesActivites ul:eq(1)").css('top', '-1000px').css('left', '-1px');
    jQuery("#rfr-header-logo").css('display', 'block');
    console.log(event.type, " :: ", this.id);
});

Answer 2

鼠标事件通常不会因按键而触发。.focus()和.blur()是你所追求的。

• http://api.jquery.com/category/events/

编辑:默认情况下，大多数非表单元素不能接受焦点，您需要为它们添加一个tabindex属性:

<li tabindex="0" ... > ... </li>