如何管理此背景图片和班级的悬停行为？

Question

I have an image that loads into a DIV:

.playerSkipForward
{
    background-image: url("../images/player/forward.png");
    background-repeat: no-repeat;
    cursor: pointer;
}

With hover image set

.playerSkipForward:hover
{
    background-image: url("../images/player/forward-hover.png");
}

Then at a certain point I add a class to it that changes the image and makes it look "inactive"

$(track).parents().find('.playerSkipForward').addClass('playerSkipForward_inactive')

The new (inactive) class is declared in my CSS like so

.playerSkipForward_inactive
{
    background-image: url("../images/player/forward_inactive.png");
    background-repeat: no-repeat;
    cursor: default;
}

The image changes to the one in the class above correctly. However, it still hovers and changes colors. I do not want to add an unbinding like .on('hover') because bindings can be tricky to manage. Is there a way to override the hover with just the added css class?

Answer 1

Looking at your comments I think this is an issue with CSS specificity .

Try using the following CSS class instead of your current .playerSkipForward_inactive :

.playerSkipForward.playerSkipForward_inactive,
.playerSkipForward.playerSkipForward_inactive:hover
{
    background-image: url("../images/player/forward_inactive.png");
    cursor: default;
}

Note I've also removed the background-repeat property. You already set the same value for this in your .playerSkipForward rule.

Answer 2

.playerSkipForward_inactive, .playerSkipForward_inactive:hover
{
    background-image: url("../images/player/forward_inactive.png");
    background-repeat: no-repeat;
    cursor: default;
}

If you're using two classes at once, try this more specific selector:

.playerSkipForward.playerSkipForward_inactive, 
.playerSkipForward.playerSkipForward_inactive:hover
    { 
    ...
    }

or the more common and simple:

.playerSkipForward.inactive, 
.playerSkipForward.inactive:hover
    { 
    ...
    }

Answer 3

The following code should do the trick. Just override the hover functionality for inactive state using important keyword.

.playerSkipForward_inactive:hover
{
    background-image: url("../images/player/forward_inactive.png") !important;
    background-repeat: no-repeat !important;
    cursor: default !important;
}