Question

这里的大盒子 - 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;
        }
    })
});

Answer 1

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

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

JS：

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

CSS：

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

Answer 2

在您的代码中更改此内容 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 个答案: