0

这就是我所拥有的：

$('#blah').hover(function(){
    $('etc').show();
}, function(){
    $('etc').hide();
});

这工作得很好，现在我希望上面的代码与 on() 方法一起工作：

$('#blah').on('hover', function(){
    $('#etc').show();
}, function(){
    $('#etc').hide();
});

但这不起作用，有人知道为什么吗？但这也有效：

$('#blah').on('hover', function(){
    $('#etc').show();
});

当我使用 on() 方法时，回调函数不起作用，所以我将 mouseover() 和 mouseleave() 与 on() 一起使用并且它正在工作，我只是想知道为什么悬停回调不起作用 on ()，这比使用 2 个事件要简单得多......

谢谢

4

7 回答 7

3

来自 Jquery 文档。jQuery on

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

$("div.test").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});
于 2013-03-01T09:54:22.547 回答
2

从JQuery源码来看，hover不包含在触发导致JQuery的事件列表中.on()

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
});

这是因为.hover()它只是 JQuery.mouseenter()和.mouseleave()

jQuery.fn.hover = function( fnOver, fnOut ) {
    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
};

我希望这个简短的解释提供很少的指导。

于 2013-03-01T10:05:39.943 回答
1

使用 mouseenter 和 mouseleave 进行悬停。在此处使用悬停检查。

$("#blah").on(
{
    mouseenter: function() 
    {
        //stuff to do on mouseover
    },
    mouseleave: function()
    {
        //stuff to do on mouseleave
    }
});

使用切换显示/隐藏，

$('#blah').on('hover', function(){
    $('#etc').toggle();
});
于 2013-03-01T09:51:25.620 回答
1

这是因为hover它不是真正的浏览器事件，实际上它只是调用的简写

 $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

从 1.8 版开始，不推荐使用.on('hover')表单。

于 2013-03-01T09:52:02.747 回答
0

采用

 jQuery.on("hover","#blah", function..)

或者你也可以使用 jQuery 的切换功能

于 2013-03-01T09:50:26.190 回答
0

是的，它不起作用，因为当您使用.on()thenhover事件hover时，只有一个回调函数，而不是您可以在.on()

尝试

$("DOM").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    }
});
于 2013-03-01T09:51:06.643 回答
0

使用切换（）

$('#blah').on('hover', function(){
   $('#etc').toggle();
});
于 2013-03-01T09:52:04.780 回答