Jquery在鼠标悬停时无法正常工作

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

- Param Veer

---

使用“mouseover”而不是“hover”会发生什么？ - Chris Dixon

Answer 1

自jQuery 1.8版本起已被弃用：名称“hover”用作字符串“mouseenter mouseleave”的速记。它为这两个事件附加单个事件处理程序，处理程序必须检查event.type以确定事件是mouseenter还是mouseleave。不要混淆“hover”伪事件名和接受一个或两个函数的.hover()方法。

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

以上内容基本涵盖了全部内容，无法使用“hover”代替：

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

- nbrooks

---

假设有一个ajax调用，.top-level的内容被替换为新的内容，那么这个mouseenter事件还会起作用吗？ - Param Veer

@param 是的，这将完美地工作，这种语法仍然完全支持委托事件（由在函数定义时不在DOM中的元素触发的事件）。这将实现您对动态生成元素的要求。 - nbrooks

谢谢你的回答 :) 我刚刚使用动态内容进行了检查，它完美地工作了。 - Param Veer

@ParamVeer 希望它有用！ :) - nbrooks

这个问题困扰了我好几天，我百分之百确定我的代码是正确的，当我用"mouseenter"替换"hover"时它确实起作用了。我仍然不明白为什么他们要移除它，而不是改进名称或者至少抛出一个错误。无论如何，非常感谢你！ - John M.

Answer 2

并没有"hover"事件。有一个.hover()函数，接受两个回调函数（就像你的例子中一样）。

- Dziad Borowy

---

想象一下，如果所有的答案都能如此简洁明了。做得好！ - Operator

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();
  });
});​

- Danil Speransky

---

所以我不能使用hover？相反，我必须使用'mouseenter'。 - Param Veer

谢谢，我感激你和 @nbrooks 的回答。两个答案都是正确的，感谢如此详细的解释。 - Param Veer

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

- Sudhir Bastakoti

Answer 5

尝试

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

- Florian Bauer