hover() 和 click() 不能一起玩答案

【问题标题】：hover() and click() not playing well togetherhover() 和 click() 不能一起玩
【发布时间】：2010-10-04 19:55:24
【问题描述】：

鉴于以下代码，悬停功能可以正常工作，但单击时会丢失clicked_no_event_box 类。不知道哪里出错了……

/* On document.ready.. */ $(function(){

        $(".no_event_box").hover(
            function(){$(this).addClass("clicked_no_event_box");}, 
            function(){$(this).removeClass("clicked_no_event_box");}    
        );      

        $(".no_event_box").click(
            function () {$(this).addClass("clicked_no_event_box");}
        );

    });

【问题讨论】：

大概，当您将鼠标悬停在元素之外时，它会丢失“clicked_no_event_box”类？
点击后应该添加

标签： javascript jquery

【解决方案1】：

它完全按照您的指示工作。如果你想坚持类，你可以在 css 中为该类名添加一个别名。

.clicked_no_event_box, .new_name_to_be_used_in_click_function {
    /* definition */
}

【讨论】：

【解决方案2】：

由于hover函数会移除类，所以即使你点击了，你也可以在点击后解除悬停功能。

$('.no_event_box').hover(
    function() {
        $(this).addClass('clicked_no_event_box');
    }, function() {
        $(this).removeClass('clicked_no_event_box');
    }
).click(function() {
    $(this)
        .addClass('clicked_no_event_box')
        .unbind('hover')
    ;
});

【讨论】：