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 在鼠标悬停时效果很好，但在 Tab 键悬停时效果不佳!您遇到过类似的问题吗？

我已尝试使用 .bind 来触发这两个事件，但仍然无法正常工作!

如果在 mouseenter 上触发事件但没有焦点!

Answer 1

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

要让您的代码同时在 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);
});