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

142

当您将鼠标悬停在元素上时，我的CSS会更改格式。

HTML：

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

CSS：

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

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

因此，我提出了一个问题：是否有办法从元素中删除“悬停” css样式？

html css

— 开发者
source

44

我将使用两个类。保留测试类，并添加一个名为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>

展开摘要

— 饼干堆
source

277

一种方法是添加：

pointer-events:none;

到要在其上禁用悬停的元素。

（请注意：这也会同时禁用该元素上的javascript事件，点击事件实际上会落在后面的元素上）。

浏览器支持（截至2019年8月22日为97.04％）

这似乎更干净

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

展开摘要

— 博德曼
source

4

好的答案，只有IE <11才不支持，所以不再是太大的问题了。

— Olivier-interfaSys 2015年

2

这个答案很干净，正是我想要的。我曾经使用过它，但是它对我来说仍然是新的，因此我常常会忘记它。

— nicorellius

2

正是我需要的是完美的：D

— Alizoh 2015年

5

没有为指针事件投票。这就是我所寻找的。

— Garavani

2

@Bodman指针事件：无；删除了悬停背景更改，但也禁用了我的元素中的超链接。如何删除悬停效果但保留超链接？

— BioDeveloper

230

使用: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规则！

— 丹尼尔
source

6

绝对是最好的解决方案！更少的代码，并且在每种浏览器中都可以正常工作。

— Ben Besuijen

这对我有用，但我必须作一个更改，即:hover。这可能是因为我不确定使用SASS。

— nurdyguy

2

谢谢，我通过添加touchDevice类body并将css规则更改为类似命令，从而禁用了我应用程序中触摸设备的自定义按钮上的任何悬停效果，例如body:not(.touchDevice) .button:hover { ... }

— Alexander

1

是的，这种解决方案要好得多。

— Tsurule Vol

2

添加一个新的.css类：

#test.nohover:hover { border: 0 }

和

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

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

— 马克·B
source

它会。并且它将覆盖默认外观，这是不同的。因此，总会有一个浏览器在其中显示悬停。

— maaartinus

1

我也遇到了这个问题，我的解决方案是在一个元素上方放置一个我不希望在上面悬停效果的元素：

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

展开摘要

— 干弗洛林
source

1

有趣的解决方案。

— 博德曼

-2

您要保留选择器，因此添加/删除选择器将不起作用。不必编写一个快速的CSS选择器（或两个），您可以仅使用原始选择器根据一些标准将新CSS规则应用于该元素：

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

— 布利
source