0

我有一个加载到 DIV 中的图像：

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

带有悬停图像集

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

然后在某个时刻，我向其中添加了一个类，该类会更改图像并使其看起来“不活动”

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

像这样在我的 CSS 中声明了新的（非活动的）类

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

图像正确更改为上述类中的图像。但是，它仍然悬停并改变颜色。我不想添加类似的解除绑定，.on('hover')因为绑定可能很难管理。有没有办法只用添加的 css 类来覆盖悬停？

4

3 回答 3

1

查看您的评论，我认为这是CSS specificity的问题。

尝试使用以下 CSS 类而不是您当前的.playerSkipForward_inactive：

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

请注意，我还删除了该background-repeat属性。您已经在.playerSkipForward规则中为此设置了相同的值。

于 2013-03-25T17:24:08.087 回答
0

下面的代码应该可以解决问题。important只需使用关键字覆盖非活动状态的悬停功能。

.playerSkipForward_inactive:hover
{
    background-image: url("../images/player/forward_inactive.png") !important;
    background-repeat: no-repeat !important;
    cursor: default !important;
}
于 2013-03-25T16:58:32.210 回答
0 
.playerSkipForward_inactive, .playerSkipForward_inactive:hover
{
    background-image: url("../images/player/forward_inactive.png");
    background-repeat: no-repeat;
    cursor: default;
}

如果你同时使用两个类，试试这个更具体的选择器：

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

或更常见和简单的：

.playerSkipForward.inactive, 
.playerSkipForward.inactive:hover
    { 
    ...
    }
于 2013-03-25T16:56:42.090 回答