Changing the hover behavior of an element

Question

The big box here - http://jsfiddle.net/uwL3q7un/ - turns orange when you roll over it. If you click the small box it sets a flag that I want to somehow change the hover behavior of the big box to turn black when you roll over it. I tried adding a class to box:hover, as you can see, but that doesn't seem to work. Does anyone see a way to do this?

Thanks.

$(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;
        }
    })
});

And `.hoverBlack` should be `#box.hoverBlack:hover` (in the CSS). — emerson.marini, Sep 29 '14 at 15:10
That's the result: http://jsfiddle.net/MelanciaUK/uwL3q7un/3/ — emerson.marini, Sep 29 '14 at 15:10
And now observe the number of quick answers below that are similar to the comments above... — emerson.marini, Sep 29 '14 at 15:11
Yes, but you seemed to invite them by not putting your comment into an answer, which I would have gladly selected. BTW, do you happen to have the jQuery reference that explains why you're right and I'm wrong? — Steve, Sep 29 '14 at 15:36
If the solution for the problem is small and easy (possibly maybe a duplicate), instead of downvoting and voting to close the question, I just leave a comment. — emerson.marini, Sep 29 '14 at 15:58
And it was really a duplicate: http://stackoverflow.com/questions/12740967/how-do-you-add-pseudo-classes-to-elements-using-jquery — emerson.marini, Sep 29 '14 at 15:59

score 1 · Accepted Answer · answered Sep 29 '14 at 15:10

Fiddle: http://jsfiddle.net/uwL3q7un/1/

You cannot add or remove a class on the :hover pseudo-element. You have to do it on the actual element and handle the hover state in the CSS.

JS:

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

CSS:

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

score 1 · Answer 2 · answered Sep 29 '14 at 15:11

Change this in your code 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;
        }
    })
});

And the css

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

Changing the hover behavior of an element

2 Answers2