Question

我正在更改我的代码以与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开始不推荐 ：名称“hover”用作字符串“mouseenter mouseleave”的简写。它为这两个事件附加单个事件处理程序，并且处理程序必须检查event.type以确定事件是mouseenter还是mouseleave。 请勿将“hover”伪事件名称与.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/

如果您不需要处理程序也可以绑定动态添加的元素，那么您可以使用具有2个事件处理程序的良好的旧hover函数。

$('.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();
        });
    }
});

OR

$(".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悬停不起作用

5 个答案: