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事件，点击事件实际上会落到后面的元素中。）

Browser Support（截至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伪类排除您不希望悬停应用于的类：

<强> FIDDLE

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

Answer 4

添加一个新的.css类：

#test.nohover:hover { border: 0 }

和

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

更具“特定”的css规则获胜，因此这个border：0版本将覆盖其他地方指定的泛型。

Answer 5

我也有这个问题，我的解决方案是在元素上面有一个元素我不想要悬停效果：

.no-hover {
  position: relative;
  opacity: 0.65 !important;
  display: inline-block;
}

.no-hover::before {
  content: '';
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button class="btn btn-primary">hover</button>
<span class="no-hover">
  <button class="btn btn-primary ">no hover</button>
</span>

Answer 6

您想要保留选择器，因此添加/删除它将无效。您可以使用原始选择器根据某些标准将新CSS规则应用于该元素，而不是编写一个硬且快速的CSS选择器（或两个）：

$(".test").hover(
  if(some evaluation) {
    $(this).css('border':0);
  }
);

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

6 个答案: