首页 / JAVASCRIPT / js中hover无效怎么解决

js中hover无效怎么解决

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js中hover无效怎么解决，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1255字，纯文字阅读大概需要2分钟。

内容图文

这其实是css的优先级导致的。

首先来看下不用js添加css属性，hover能正常设置背景颜色。

<div id="add"></div>
#add{
  width: 50px;
  height: 50px;
  background-color: greenyellow;
}#add:hover{
  background-color: #000;
}

js中hover无效怎么解决 - 文章图片js中hover无效怎么解决 - 文章图片

左边的图是默认情况下，右边是鼠标放上去的时候，现在hover还是能正常显示的。

（下面的图都是左边默认，右边hover，应为截图工具不能把鼠标也截上来）

但是如果通过js插入css样式的话，鼠标放上去的hover样式就不会生效了。

var add = document.getElementById("add");
add.style.backgroundColor = "red";

js中hover无效怎么解决 - 文章图片js中hover无效怎么解决 - 文章图片

现在hover里设置的#000属性已经失效了。

但这并不是hover伪类失去的作用，如果设置不是js添加的样式，就能看出hover并没有失效，比如添加一下字体颜色试一下。

#add:hover{
  background-color: #000;
  color: yellow;
}

js中hover无效怎么解决 - 文章图片js中hover无效怎么解决 - 文章图片可以看到字体颜色还是会改变的。

原因是应为js添加css样式是直接在html标签的style上添加的，而style的优先级高于css伪类。

js中hover无效怎么解决 - 文章图片

js中hover无效怎么解决 - 文章图片

从上到下style,hover,id选择器。

可以在浏览器调试工具里看到，js是直接添加到style里的。

那么该怎么办呢

里边讲了选择器的优先级。但是并没有讲到css伪类和style的优先级。

但是:hover伪类也失效了。说明style>css伪类>id>class。

给:hover的属性后面添加!important就可以了。应为!important优先级高于一切！！

!important>style>css伪类>id>class。

#add:hover{
  background-color: #000 !important;
}

js中hover无效怎么解决 - 文章图片js中hover无效怎么解决 - 文章图片

现在终于达到了想要的结果。

以上就是js中hover无效怎么解决的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的js中hover无效怎么解决全部内容，希望文章能够帮你解决js中hover无效怎么解决所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/301187.html

来源：【匿名】