Question

这就是我所拥有的：

$('#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（）方法时，回调函数不起作用，所以我在on（）上使用mouseover（）和mouseleave（）并且它正在工作，我只是想知道为什么悬停回调不是使用on（），这比使用2个事件简单....

由于

Answer 1

来自Jquery docs。 Jquery on

从jQuery 1.8开始不推荐使用：名称“hover”用作简写字符串“mouseenter mouseleave”。它附加一个事件处理程序对于这两个事件，处理程序必须检查event.type 确定事件是否为mouseenter或mouseleave。不要将“hover”伪事件名称与.hover（）方法混淆接受一个或两个功能。

$("div.test").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

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

我希望这个简短的解释几乎无法提供指导。

Answer 3

使用mouseenter和mouseleave进行悬停。使用悬停在here上进行检查。

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

使用切换显示/隐藏，

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

Answer 4

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

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

从版本1.8开始，使用.on('hover')表单have been deprecated。

Answer 5

使用

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

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

Answer 6

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

尝试

$("DOM").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    }
});

Answer 7

使用toggle（）

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

使用on（）和hover - jQuery

7 个答案: