从元素中删除“：hover”CSS行为
从元素中删除“：hover”CSS行为
提问于 2011-02-22 01:23:25
我有一个CSS，当你将鼠标悬停在一个元素上时，它会改变格式。
.test:hover { border: 1px solid red; }<div class="test">blah</div>
在某些情况下，我不想在悬停时应用CSS。一种方法是使用jQuery从div中删除CSS类，但这会破坏其他东西，因为我还使用了该类来格式化它的子元素。
有没有办法从元素中移除'hover‘css样式？
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-02-22 01:26: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>
Stack Overflow用户
发布于 2011-02-22 01:27:33
添加新的.css类：
#test.nohover:hover { border: 0 }和
<div id="test" class="nohover">blah</div>越“具体”的css规则就会胜出，所以这个border:0版本将覆盖在别处指定的通用版本。
Stack Overflow用户
发布于 2018-04-05 16:47:25
我也有这个问题，我的解决方案是在我不想要悬停效果的元素之上有一个元素：
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5069110
复制相关文章
相似问题
腾讯云开发者
