我有一个悬停的div：
.div {
// css
}
.div:hover {
// css
}
但是我想在你点击div时禁用悬停.
解决方法
选项1. Javascript解决方案
$('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>
选项2. CSS解决方案
或者,在纯CSS中(尽管没有规则持久性)
div {
color: blue;
}
div:not(:focus):hover {
color: red;
}
div:focus {
outline: none;
}
<div tabindex="0">hover!</div>
