javascript – 禁用:点击鼠标悬停

前端之家收集整理的这篇文章主要介绍了javascript – 禁用:点击鼠标悬停前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个悬停的div:
.div {
  // css
}
.div:hover {
  // css
}

但是我想在你点击div时禁用悬停.

@H_502_6@

解决方法

选项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>
@H_502_6@ @H_502_6@

猜你在找的JavaScript相关文章