Html 从元素中删除 ':hover' CSS 行为
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5069110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove ':hover' CSS behavior from element
提问by dev.e.loper
I have CSS that changes formatting when you hover over an element.
当您将鼠标悬停在元素上时，我有 CSS 会更改格式。
HTML:
HTML：
<div class="test"> blah </div>
CSS:
CSS：
.test:hover { border: 1px solid red; }
In some cases I don't want to apply CSS on hover. One way would be to just remove CSS class from the div using jQuery but that would break other things since I also using that class to format its child elements.
在某些情况下，我不想在悬停时应用 CSS。一种方法是使用 jQuery 从 div 中删除 CSS 类，但这会破坏其他东西，因为我也使用该类来格式化其子元素。
So that led me to question: Is there a way to remove 'hover' css styling from an element?
所以这让我产生了疑问：有没有办法从元素中删除“悬停”css 样式？
采纳答案by biscuitstack
I would use two classes. Keep your test class and add a second class called testhover which you only add to those you want to hover - alongside the test class. This isn't directly what you asked but without more context it feels like the best solution and is possibly the cleanest and simplest way of doing it.
我会使用两个类。保留您的测试类并添加第二个名为 testhover 的类，您只将其添加到您想要悬停的类中 - 与测试类一起。这不是您直接问的问题，但没有更多上下文，它感觉像是最好的解决方案，并且可能是最干净和最简单的方法。
Example:
例子：
.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>回答by Bodman
One method to do this is to add:
一种方法是添加：
pointer-events:none;
to the element you want to disable hover on.
到要禁用悬停的元素。
(note: this also disables javascript events on that element too, click events will actually fall through to the element behind ).
（注意：这也会禁用该元素上的 javascript 事件，点击事件实际上会落到后面的元素上）。
Browser Support( 97.04% as of Aug 22,2019 )
浏览器支持（截至 2019 年 8 月 22 日为 97.04%）
This seems to be much cleaner
这似乎更干净
/**
* 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>回答by Danield
Use the :notpseudo-class to exclude the classes you don't want the hover to apply to:
使用: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;
}
This does what you want in one css rule!
这在一个 css 规则中完成了你想要的！
回答by Marc B
add a new .css class:
添加一个新的 .css 类：
#test.nohover:hover { border: 0 }
and
和
<div id="test" class="nohover">blah</div>
The more "specific" css rule wins, so this border:0 version will override the generic one specified elsewhere.
更“具体”的 css 规则获胜，所以这个 border:0 版本将覆盖在别处指定的通用规则。
回答by Stem Florin
I also had this problem, my solution was to have an element above the element i dont want a hover effect on:
我也遇到了这个问题，我的解决方案是在我不希望悬停效果的元素上方放置一个元素：
.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>回答by buley
You want to keep the selector, so adding/removing it won't work. Instead of writing a hard and fast CSS selectors (or two), perhaps you can just use the original selector to apply new CSS rule to that element based on some criterion:
您想保留选择器，因此添加/删除它是行不通的。与其编写一个硬而快速的 CSS 选择器（或两个），也许您可以仅使用原始选择器根据某些标准将新的 CSS 规则应用于该元素：
$(".test").hover(
if(some evaluation) {
$(this).css('border':0);
}
);
