删除悬停CSS

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; 
}