悬停，哈弗-出局，聪明

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

我认为您的意思是在发生单击时持久化悬停类。

最好的选择是使用数据()保存状态并检查悬停状态。

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

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

:hover规则意味着它是悬停的。当您希望.hover规则在单击后看起来很悬停时，就会使用它。