Question

jQuery noobie在这里。我运行时代码工作正常：

 $('.badge').hover( 
    function() {
        $('.js-main-header').hide()
        $(this).find('.js-badge').show()
    },
    function() {
        $(this).find('.js-badge').hide()
        $('.js-main-header').show()
    }
); // end hover

但是当我使用on（）方法时，没有悬停效果。

 $('.badge').on('hover', 
    function() {
        $('.js-main-header').hide()
        $(this).find('.js-badge').show()
    },
    function() {
        $(this).find('.js-badge').hide()
        $('.js-main-header').show()
    }
); // end hover

Answer 1

hover()方法接受2个函数作为参数，一个用于鼠标悬停，另一个用于mouseout。 on()方法在这里使用不正确，因为您应该将其声明两次，一次用于鼠标悬停，另一次用于mouseout。

$('.badge')
    .on('mouseover', $.noop);
    .on('mouseout', $.noop);

Answer 2

hover()上的官方jQuery文档。

致电$(selector).hover(handlerInOut)是：

的简写

$(selector).on("mouseenter mouseleave", handlerInOut);

如果您需要致电mouseover/mouseout，因为您使用的是早期版本，我会绑定到那些版本，否则您可以使用hover()功能。

可以使用on（）方法悬停事件吗？

2 个答案: