禁用:点击时悬停 [英] Disable :hover on click
本文介绍了禁用:点击时悬停的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个已悬停的div
:
.div {
// css
}
.div:hover {
// css
}
但是当您单击div
时,我想禁用悬停.
But I want to disable the hover when you click on the div
.
推荐答案
选项1.JavaScript解决方案
只需添加一个类,禁止在单击时应用悬停样式:
Option 1. The Javascript solution
Simply add a class prohibiting the application of hover styling on click:
$('div').on('click', function() { // when you click the div
$(this).addClass('no-hover'); // add the class 'no-hover'
});
div {
color: blue;
}
div:not(.no-hover):hover { /* only apply hover styling when the div does not have the class 'no-hover' */
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>hover!</div>
或者,在纯CSS中(尽管没有规则持久性)
Alternatively, in pure CSS (although without rule persistence)
div {
color: blue;
}
div:not(:focus):hover {
color: red;
}
div:focus {
outline: none;
}
<div tabindex="0">hover!</div>
这篇关于禁用:点击时悬停的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文