悬停、悬停、选中

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/ （这是我的原创）

---

完成！通过本<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

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 只需处理点击：

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

:hover 规则意味着它处于悬停状态。当您希望它在单击后看起来悬停时，将使用 .hover 规则。

Answer 3

使用鼠标悬停和鼠标悬停

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

Answer 4

保留一个变量，其中包含单击的菜单项的 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");
    }
});

Answer 5

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;}