从元素中删除'：hover'CSS行为
当您将鼠标悬停在某个元素上时，我的CSS会更改格式。
HTML：
<div class="test"> blah </div>
CSS：
.test:hover { border: 1px solid red; }
在某些情况下，我不希望将CSS应用于悬停。 一种方法是使用jQuery从div中删除CSS类，但这会破坏其他的东西，因为我也使用该类来格式化其子元素。
所以这让我质疑：有没有办法从元素中删除'悬停'CSS样式？
我会用两个班。 保留你的测试类并添加一个名为testhover的第二个类，它只添加到那些你想要悬停的类中 - 与测试类一起。 这不是直接问你的问题，但没有更多的上下文感觉是最好的解决方案，可能是最干净和最简单的方法。
例：
HTML：
<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test testhover"> blah </div>
CSS：
.test { border: 0px; }
.testhover:hover { border: 1px solid red; }
使用:not伪类来排除不希望悬停的类应用于：
小提琴
<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test nohover"> blah </div>
.test:not(.nohover):hover {
border: 1px solid red;
}
这就是你想在一个CSS规则！
一种方法是添加：
pointer-events:none;
到您要禁用悬停的元素。
（注意：这也会禁用该元素上的JavaScript事件，点击事件实际上会落在后面的元素上）。
浏览器支持（截至2011年3月21日，95.13％）
这似乎更清洁
/**
* This allows you to disable hover events for any elements
*/
.disabled {
pointer-events: none; /**<-----------*/
opacity: 0.2;
}
.button {
border-radius: 30px;
padding: 10px 15px;
border: 2px solid #000;
color: #FFF;
background: #2D2D2D;
text-shadow: 1px 1px 0px #000;
cursor: pointer;
display: inline-block;
margin: 10px;
}
.button-red:hover {
background: red;
}
.button-green:hover {
background:green;
}<div class="button button-red">Im a red button hover over me</div>
<br/>
<div class="button button-green">Im a green button hover over me</div>
<br/>
<div class="button button-red disabled">Im a disabled red button</div>
<br/>
<div class="button button-green disabled">Im a disabled green button</div>