Javascript 如何管理此背景图像和类'；什么是悬停行为？

我有一个加载到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");
}

然后在某一点上，我添加了一个类来更改图像并使其看起来“不活动”

新的（非活动的）类在我的CSS中声明如下

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

图像将正确更改为上面类中的图像。但是，它仍然会悬停并更改颜色。我不想添加像

.on（'hover'）

这样的解除绑定，因为绑定可能很难管理。有没有办法只用添加的css类来覆盖悬停

.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
    { 
    ...
    }

---

下面的代码应该可以做到这一点。只需使用

重要

关键字覆盖非活动状态的悬停功能

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

---

看看你的评论，我认为这是一个问题

尝试使用以下CSS类而不是当前的

。playerSkipForward\u inactive

：

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

---

注意，我还删除了

背景重复

属性。您已经在

.playerSkipForward

规则中为此设置了相同的值。

是的，这是我尝试过的，但由于某些原因，即使在不悬停时加载了新的“非活动”图像，它仍会恢复为原始悬停图像。有什么想法吗？我的答案中增加了一种可能性。@frankie这与CSS的特殊性有关。请查看我答案中的链接，或者用谷歌搜索更多信息。这是因为新的CSS规则没有优先于现有的类。

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