Question

$('#box_1, #box_2, #box_3, #box_4').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});

但是，当我点击“HOVER”class = .removeClass('hover')

时

无论如何，当我点击时保持这个“HOVER”课程？

http://jsfiddle.net/EAa6p/（这是我的原创）

完成！由Ben＆lt; 3 http://jsfiddle.net/EAa6p/1/ 谢谢大家

Answer 1

我认为你的意思是在发生点击时坚持悬停类。

最好的选择是使用data()保存状态并检查是否悬停

var boxes = $('#box_1, #box_2, #box_3, #box_4');
boxes.hover(function() {
    $(this).addClass('hover');
}, function() {
    if (!$(this).data('clicked'))
        $(this).removeClass('hover');
}).click(function(){

    boxes.not(this).removeClass('hover').data('clicked',false);;
    $(this).data('clicked',true);

});

这就是你想要的吗？

http://jsfiddle.net/uhc9S/

Answer 2

使用鼠标悬停和鼠标移动

$('#box_1, #box_2, #box_3, #box_4').mouseover(function(){
   $(this).addClass('hover');
}).mouseout(function(){
   $(this).removeClass('hover');
});

Answer 3

CSS：将您的.hover{...}规则更改为

#box_1:hover, #box_1.hover,
#box_2:hover, #box_2.hover,
#box_3:hover, #box_3.hover,
#box_4:hover, #box_4.hover {
    ...
}

JavaScript / jQuery：不要在悬停时添加悬停类并在卸载时将其删除。相反，CSS将处理悬停，jQuery只需处理click：

$('#box_1, #box_2, #box_3, #box_4').click(function() {
    $(this).addClass('hover');
});

:hover规则意味着它被徘徊。如果您希望在单击后看起来悬停，则会使用.hover规则。

Answer 4

http://jsfiddle.net/hRnQE/

点击，切换另一个做同样事情的“不同”类......

JS

$("#box-1, #box-2, #box-3").hover(function() {
    $(this).addClass("hover");
}, function() {
    $(this).removeClass("hover");
});

$("#box-1, #box-2, #box-3").click(function() {
    $(this).toggleClass("hover-clicked");
});

CSS

.hover {color:red;}
.hover-clicked {color:red;}

Answer 5

保留一个包含menuitem id的变量点击

var currentSelected = null;

$('#box_1, #box_2, #box_3, #box_4').click(function(){
     currentSelected = this.id;   
});

$('#box_1, #box_2, #box_3, #box_4').hover(function(){
    if (this.id !== currentSelected){
        $(this).addClass("hover");
    }
},
function(){
    if (this.id !== currentSelected){
        $(this).removeClass("hover");
    }
});

悬停，徘徊，邪恶

5 个答案: