设置特定的html-class时覆盖hover伪类CSS属性

Question

我正在尝试以箭头的形式显示具有向上和向下导航的图像集。我添加了

cursor:pointer;

悬停时的箭头以强调可点击性。但是，当某个方向上没有更多图像时，我将该类设置为禁用。

.disabled
{
    cursor:default;
}

但是，hover伪类在此处优先，并将光标更改为指针。我该如何阻止：当设置.disabled时，将鼠标悬停设置为指针？它有可能吗？

Answer 1

另外添加

.disabled:hover {
   cursor: default;
}

Answer 2

使用!important。

.disabled {
    cursor:default!important;
}

IE6的!important实现是错误的，因此如果您需要支持它，您可能最好重新排序规则以获得.disabled类所需的优先级。

David Dorward在评论中提出了一个有趣的观点。在:hover伪类中将值应用于 cursor 是完全多余的。以下规则具有完全相同的效果：

.mylink { cursor:pointer; }
.mylink:hover { cursor:pointer; }

因此，您应该避免在伪类中设置 cursor 并坚持

.mylink { cursor:hand; }