Question

我在鼠标悬停/离开/点击功能方面遇到了一个小问题。

它工作正常，但点击元素后它会丢失悬停功能。单击元素后我无法获得悬停功能。

$('.bg').click(function () {
    $(this).unbind("mouseenter mouseleave");
    $('.bg').removeClass('active');

    $(this).addClass('active');

}).hover(function () {    
    $(this).addClass('active');
}, function () {    
    $(this).removeClass('active');
});

jsfiddle -

http://jsfiddle.net/squidraj/SVkBs/1/

不确定我在做错误的地方。谢谢。

Answer 1

您可以将:hover CSS添加到以下元素：http://jsfiddle.net/Agony/SVkBs/2/

Answer 2

hover()做的是绑定mouseenter和mouseleave处理程序。 unbind()做的是删除那些处理程序。

所以你的代码完全按照你所说的去做;单击时，它会禁用您的悬停处理。

Answer 3

$('.bg').click(function () {
    /* remove that following line  */
    $(this).unbind("mouseenter mouseleave");  /* <-- this will UNBIND the 'hover' */
    /* did you remove that previous line ? */
    $('.bg').removeClass('active'); /* <-- this will remove 'active' from .bg */
    $(this).addClass('active');  /* <-- this will add 'active' on this(.bg) */
}).hover(function () {    /* <-- this will try to addClass 'active' on hover .. */
    $(this).addClass('active');
}, function () {    /* <-- this will try to removeClass on the otherHand (callback) */
    $(this).removeClass('active');
});

PS。这个功能正常工作，你只是不知道它应该做什么（取消绑定悬停事件）。

这样做（在悬停时切换课程）

$('.bg').hover(
       function(){ $(this).addClass('active') },
       function(){ $(this).removeClass('active') }
)

在同一元素上单击并悬停功能

3 个答案: