悬停时的Jquery不起作用

Jquery on hover not functioning

本文关键字：不起作用 Jquery 悬停      更新时间：2023-09-26

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

自jQuery 1.8起已弃用 ：名称"hover"用作字符串"mouseenter-moseleave"的缩写。它为这两个事件附加了一个单独的事件处理程序，处理程序必须检查event.type以确定事件是mouseenter还是mouseleave不要将"hover"伪事件名称与.hooper（）方法混淆，后者接受一个或两个函数

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

这几乎说明了一切，你不能用"悬停"：

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

没有"悬停"事件。有一个.haverage（）函数，它接受2个回调（如您的示例中所示）。

尝试：

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

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

如果需要，则对mouseenter和mouseleave事件使用on：

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

尝试

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