js添加css属性导致：hover⽆效的解决办法
这其实是css的优先级导致的。
⾸先来看下不⽤js添加css属性，hover能正常设置背景颜⾊。
<div id="add"></div>
#add{
width: 50px;
height: 50px;
background-color: greenyellow;
}
#add:hover{
background-color: #000;
}
左边的图是默认情况下，右边是⿏标放上去的时候，现在hover还是能正常显⽰的。
（下⾯的图都是左边默认，右边hover，应为截图⼯具不能把⿏标也截上来）
但是如果通过js插⼊css样式的话，⿏标放上去的hover样式就不会⽣效了。
var add = ElementById("add");
add.style.backgroundColor = "red";
现在hover⾥设置的#000属性已经失效了。
但这并不是hover伪类失去的作⽤，如果设置不是js添加的样式，就能看出hover并没有失效，⽐如添加⼀下字体颜⾊试⼀下。#add:hover{
background-color: #000;
color: yellow;
}
可以看到字体颜⾊还是会改变的。
原因是应为js添加css样式是直接在html标签的style上添加的，⽽style的优先级⾼于css伪类。
从上到下style,hover,id选择器。
可以在浏览器调试⼯具⾥看到，js是直接添加到style⾥的。
那么该怎么办呢
不了解css优先级的朋友可以先看⼀下博客园⼤⽜写的⼀篇css优先级的⽂章。
⾥边讲了选择器的优先级。但是并没有讲到css伪类和style的优先级。
但是:hover伪类也失效了。说明style>css伪类>id>class。
给:hover的属性后⾯添加!important就可以了。应为!important优先级⾼于⼀切！！!important>style>css伪类>id>class。
cssclass属性#add:hover{
background-color: #000 !important;
}
现在终于达到了想要的结果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。