悬停时的Jquery不起作用答案

【问题标题】：Jquery on hover not functioning悬停时的Jquery不起作用
【发布时间】：2012-08-28 22:06:46
【问题描述】：

我正在更改我的代码以与 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();
  });
});

【问题讨论】：

使用“鼠标悬停”而不是“悬停”会发生什么？

标签： javascript html jquery hover jquery-events

【解决方案1】：

自 jQuery 1.8 起已弃用：名称“hover”用作字符串“mouseenter mouseleave”的简写。它为这两个事件附加了一个事件处理程序，处理程序必须检查 event.type 以确定事件是 mouseenter 还是 mouseleave。 不要混淆“悬停”伪事件名称和 .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();
    });
});

【讨论】：

假设有一个 ajax 调用并且 .top-level 的内容被替换为 new 那么这个 mouseenter 也可以工作吗？
@param 是的，这可以正常工作，这种语法仍然完全支持委托事件（由函数 def 时不在 DOM 中的元素触发的事件）。这将为动态生成的元素完成您想要的。
感谢您的回答 :) 刚刚使用动态内容检查了它，它的工作完美
@ParamVeer 很高兴它很有用！ :)
感谢分享！工作正常！ :)

【解决方案2】：

没有“悬停”事件。有 .hover() 函数需要 2 个回调（如您的示例中所示）。

【讨论】：

想象一下，如果所有答案都如此简洁明了。干得好！

【解决方案3】：

试试：

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

【讨论】：

【解决方案4】：

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

【讨论】：

所以我不能使用悬停？相反，我必须使用'mouseenter'
谢谢你的回答，@nbrooks 都回答了。两者都是正确的，感谢您提供如此详细的解释

【解决方案5】：

试试

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

【讨论】：