38

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

5 回答 5

74

自 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();
    });
});
于 2012-09-04T09:16:58.597 回答
11

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

于 2012-09-04T09:16:20.437 回答
5

.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);。

如果需要，请使用onformouseenter和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();
  });
});​
于 2012-09-04T09:15:49.337 回答
5

尝试：

$(".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();
    });
  }
});
于 2012-09-04T09:22:57.593 回答
1

尝试

$('.top-level').hover(function (event) {
        $( this ).find('.actionfcnt').show();
        $( this ).find('.dropfcnt').show();
}, function(){
        $( this ).find('.dropfcnt').hide('blind', function(){
            $('.actionfcnt').hide();
        });
});
于 2012-09-04T09:16:55.853 回答