更改元素的悬停行为答案

【问题标题】：Changing the hover behavior of an element更改元素的悬停行为
【发布时间】：2014-11-24 00:44:00
【问题描述】：

这里的大盒子 - http://jsfiddle.net/uwL3q7un/ - 翻过来时会变成橙色。如果您单击小框，它会设置一个标志，我想以某种方式将大框的悬停行为更改为在您将其翻转时变为黑色。如您所见，我尝试向box:hover 添加一个类，但这似乎不起作用。有没有人想办法做到这一点？

谢谢。

$(function(){
    var flag=false;
    $('#flag').click( function() {
        if(!flag) {
            $('#flag').css('background-color', 'red');
            $('#box:hover').addClass('hoverBlack');
            flag = true;
        }
        else {
            $('#flag').css('background-color', 'white');
            $('#box:hover').removeClass('hoverBlack');
            flag=false;
        }
    })
});

【问题讨论】：

$('#box:hover') 应该是$('#box')
而.hoverBlack 应该是#box.hoverBlack:hover（在CSS 中）。
结果如下：jsfiddle.net/MelanciaUK/uwL3q7un/3
现在观察下面与上面的 cmets 类似的快速答案的数量......
是的，但您似乎邀请他们没有将您的评论放入我很乐意选择的答案中。顺便说一句，您是否碰巧有 jQuery 参考来解释为什么您是对的而我是错的？

标签： jquery

【解决方案1】：

在您的代码中更改此项 http://jsfiddle.net/uwL3q7un/2/

$(function(){
    var flag=false;
    $('#flag').click( function() {
        if(!flag) {
            $('#flag').css('background-color', 'red');
            $('#box').addClass('hoverBlack');
            flag = true;
        }
        else {
            $('#flag').css('background-color', 'white');
            $('#box').removeClass('hoverBlack');
            flag=false;
        }
    })
});

还有CSS

#box.hoverBlack:hover {
    background-color:black;
}

【讨论】：

【解决方案2】：

小提琴：http://jsfiddle.net/uwL3q7un/1/

您不能在:hover 伪元素上添加或删除类。您必须在实际元素上执行此操作并在 CSS 中处理悬停状态。

JS：

$('#box').addClass('hoverBlack');
$('#box').removeClass('hoverBlack');

CSS：

#box.hoverBlack:hover {
    background-color:black;
}

【讨论】：