jQuery的悬停不工作(Jquery on hover not working)

我改变了我的代码是用jQuery 1.8兼容，我被困在这个hover不工作。 当我使用，那么同样的事情用click它的工作。 这里是我的代码，谁能告诉我，我要去哪里错了吗？

$(document).on('hover', '.top-level', function (event) {
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}, function () {
  $(this).find('.dropfcnt').hide('blind', function () {
    $('.actionfcnt').hide();
  });
});

Answer 1:

不赞成的jQuery 1.8：作为字符串“的mouseenter鼠标离开”的缩写名字“悬停”。 它将连接这两个事件一个单一的事件处理程序和处理程序必须检查event.type，以确定该事件是否为的mouseenter或鼠标离开。 不要与.hover（）方法，它接受一个或两个函数混淆了“悬停”伪事件名称。

来源： http://api.jquery.com/on/#additional-notes

这几乎说明了一切，你不能使用“悬停”为：

$(document).on('mouseenter','.top-level', function (event) {
    $( this ).find('.actionfcnt').show();
    $( this ).find('.dropfcnt').show();
}).on('mouseleave','.top-level',  function(){
    $( this ).find('.dropfcnt').hide('blind', function(){
        $('.actionfcnt').hide();
    });
});

Answer 2:

没有“悬停”事件。 有.hover（）函数，它接受2个回调（如在您的示例）。

Answer 3:

.on函数只有3个参数： http://api.jquery.com/on/

如果你不需要你的处理程序绑定到动态添加的元素，以及这样做，那么你可以使用好老hover功能与2个事件处理程序。

$('.top-level').hover(function (event) { 
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}, function (event) {   
  $(this).find('.dropfcnt').hide('blind', function(){
    $('.actionfcnt').hide();
  });
});​

顺便说一句， $(selector).hover(handlerIn, handlerOut)的简写为$(selector).mouseenter(handlerIn).mouseleave(handlerOut); 。

如果您需要，然后使用on进行mouseenter和mouseleave事件：

$(document).on('mouseenter', '.top-level', function (event) { 
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}).on('mouseleave', '.top-level', function (event) {   
  $(this).find('.dropfcnt').hide('blind', function(){
    $('.actionfcnt').hide();
  });
});​

Answer 4:

尝试：

$(".top-level").on({
    mouseenter: function (event) {
        $( this ).find('.actionfcnt').show();
        $( this ).find('.dropfcnt').show();
    },
    mouseleave: function (event) {
        $( this ).find('.dropfcnt').hide('blind', function(){
            $('.actionfcnt').hide();
        });
    }
});

要么

$(".top_level").on("hover", function(event) {
  if(event.type == "mouseenter") {
    $( this ).find('.actionfcnt').show();
    $( this ).find('.dropfcnt').show();
  }
  else if (event.type == "mouseleave") {
    $( this ).find('.dropfcnt').hide('blind', function(){
        $('.actionfcnt').hide();
    });
  }
});

Answer 5:

尝试

$('.top-level').hover(function (event) {
        $( this ).find('.actionfcnt').show();
        $( this ).find('.dropfcnt').show();
}, function(){
        $( this ).find('.dropfcnt').hide('blind', function(){
            $('.actionfcnt').hide();
        });
});

文章来源: Jquery on hover not working