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

Posted 2023-05-08

【中文标题】从元素中删除 \':hover\' CSS 行为

【英文标题】：Remove ':hover' CSS behavior from element从元素中删除 ':hover' CSS 行为

【发布时间】：2011-07-01 10:41:09

【问题描述】：

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

.test:hover  border: 1px solid red; 

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

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

有没有办法从元素中删除“悬停”css 样式？

【参考方案1】：

一种方法是添加：

pointer-events: none;

到元素，你想禁用悬停。

（注意：这也会禁用该元素上的 javascript 事件，点击事件实际上会传递到后面的元素）。

Browser Support（截至 2021 年 1 月 1 日为 98.12%）

这似乎更干净了

/**
 * 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">I'm a red button hover over me</div>

<br />

<div class="button button-green">I'm a green button hover over me</div>

<br />

<div class="button button-red disabled">I'm a disabled red button</div>

<br />

<div class="button button-green disabled">I'm a disabled green button</div>

【讨论】：

很好的答案，它仅在 IE

@MarkBuikema 这是真的。编辑答案以反映这一点。在许多情况下，这是一个额外的好处。

很烦人，这并没有得到广泛的支持。 “不要在 tab.current 悬停时更改格式”可能是大多数导航菜单上的一种行为。对于那些报告仅使用 2 个类的人，请考虑此时 Bootstrap 和 Angular 样式库的流行程度。一个不是简单地编写 2 个类。您可能正在梳理第 3 方风格。杂乱。感谢@Olivier-interfaSys 的信息。

@EleanorZimmermann 我会说这得到了广泛的支持。全球90.97%的用户。但是是的，如果你担心 IE9 ，你应该提供另一个类。

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

【参考方案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 规则中的要求！

【讨论】：

这对我有用，但我必须做一个改变，在:hover 之前有一个空格。这可能是因为我使用的是 SASS，不确定。

谢谢，我通过将touchDevice 类添加到body 并将我的css 规则更改为body:not(.touchDevice) .button:hover ... 之类的东西来禁用我的应用程序中触摸设备的自定义按钮上的任何悬停效果跨度>

是的，那个解决方案要好得多。

谢谢！这应该是正确的答案！

【参考方案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>

【参考方案4】：

添加一个新的 .css 类：

#test.nohover:hover  border: 0 

和

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

更“具体”的 css 规则胜出，因此此border:0 版本将覆盖其他地方指定的通用规则。

【讨论】：

会的。它还将覆盖默认外观，这是不同的。所以总会有一个浏览器可以看到悬停。

【参考方案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>

【参考方案6】：

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

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