从元素中移除“ : hover”CSS 行为

我有一个 CSS，当你把鼠标悬停在一个元素上时，它可以改变格式。

.test:hover { border: 1px solid red; }
<div class="test">blah</div>

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

有没有办法从元素中移除“ hover”css 样式？

464751 次浏览
小开
最佳答案

我会用两门课。保留您的测试类并添加一个名为 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>

小开

添加一个新的.css 类:

#test.nohover:hover { border: 0 }

还有

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

更“特定”的 css 规则胜出，所以这个边框: 0版本将覆盖其他地方指定的通用规则。

小开

您希望保留选择器，因此添加/删除它不会起作用。与其编写一个(或两个)快速的 CSS 选择器，也许你可以使用原来的选择器，根据一些条件对该元素应用新的 CSS 规则:

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

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

小开

实现这一点的一种方法是添加:

pointer-events: none;

元素，则要禁用悬停在。

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

浏览器支持 (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>

小开

我也有这个问题，我的解决方案是有一个元素上面的元素，我不希望有一个悬停效果:

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


提交答案