从元素中删除':hover'CSS行为

Question

我有CSS,当您将鼠标悬停在元素上时会更改格式.

HTML:

<div class="test"> blah </div>

CSS:

.test:hover {  border: 1px solid red; }

在某些情况下,我不想在悬停时应用CSS.一种方法是使用jQuery从div中删除CSS类,但这会打破其他事情,因为我也使用该类来格式化其子元素.

所以这让我有疑问:有没有办法从元素中删除'hover'css样式？

Answer 1

一种方法是添加:

pointer-events:none;

到要禁用悬停的元素.

(注意:这也会禁用该元素上的javascript事件,点击事件实际上会落到后面的元素).

浏览器支持 (截至2014年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>

Answer 2

使用: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规则中做你想要的!

Answer 3

我会用两个班.保留你的测试类并添加第二个名为testhover的类,你只需要添加到你想要悬停的那些 - 与测试类一起.这不是您所要求的,但没有更多的上下文,它感觉就像是最好的解决方案,可能是最干净,最简单的方法.

例:

.test {  border: 0px; }
.testhover:hover {  border: 1px solid red; }

<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test testhover"> blah </div>