javascript - 悬停事件可以与 on() 方法一起使用吗？

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 个函数作为参数，一个用于 mouseover，另一个用于 mouseout。该on()方法在这里使用不正确，因为您应该声明它两次，一次用于鼠标悬停，另一次用于鼠标悬停。

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

Answer 2

.上的官方 jQuery 文档hover()。

调用$(selector).hover(handlerInOut)是以下的简写：

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

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