Question

有没有办法创建一个从元素中删除悬停css的类？

说我有两个要素：

<div class="orange noHover">Whatever</div>
<div class="blue noHover">Whatever2</div>

.orange {
    color:orange;
}
.orange:hover {
    color:red;
}
.blue {
    color:blue;
}
.blue:hover {
    color:green;
}
.noHover:hover {
    //Remove all hover css applied
}

我希望noHover类的行为就像橙色和蓝色悬停css从未应用于任何一个元素一样。所以橙色总是橙色，蓝色总是蓝色。

Answer 1

据我所知，你希望这些元素在悬停时无所作为。也就是说，保持他们通常在没有徘徊时会有的任何风格。例如，如果它们在没有悬停时具有橙色背景，则希望它们保持橙色。

不幸的是，使用纯css无法做到这一点。

Answer 2

好吧，也许这不是你的意思，但它会起作用：

.orange,
.orange.noHover:hover {
    color:orange;
}

.orange:hover {
    color:red;
}

.blue,
.blue.noHover:hover {
    color:blue;
}

.blue:hover {
    color:green;
}

另一种方法，但与IE8及以下版本不兼容：

.orange {
    color:orange;
}
.orange:not(.noHover):hover {
    color:red;
}
.blue {
    color:blue;
}
.blue:not(.noHover):hover {
    color:green;
}

删除悬停CSS

2 个答案: