用JS添加某些CSS属性导致:hover失效

inapt 发布于2019-08-29 15:07 / 3182人阅读

摘要：不用添加属性，能正常设置背景颜色。左边的图是默认情况下，右边是鼠标放上去的时候，现在还是能正常显示的。可以看到字体颜色还是会改变的。原因是应为添加样式是直接在标签的上添加的，而的优先级高于伪类。现在终于达到了想要的结果

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

#add{
  width: 50px;
  height: 50px;
  background-color: greenyellow;
}
#add:hover{
  background-color: #000;
}

--------------------

左边的图是默认情况下，右边是鼠标放上去的时候，现在hover还是能正常显示的。
（下面的图都是左边默认，右边hover）
但是如果通过js插入css样式的话，鼠标放上去的hover样式就不会生效了。

var add = document.getElementById("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知多少（6）——选择器的优先级。
里边讲了选择器的优先级。但是并没有讲到css伪类和style的优先级。
但是:hover伪类也失效了。说明style>css伪类>id>class。
给:hover的属性后面添加!important就可以了。应为!important优先级高于一切！！
!important>style>css伪类>id>class。

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

--------------------

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

云服务器 GPU云服务器用js添加css 导致定时器失效 js调用css属性属性导致

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113117.html

玩转CSS选择器（二）之浏览器支持，常见Bug，性能优化

摘要：本节内容会跟着上一节的内容继续完善，首先会补充选择器的浏览器支持情况主要是说，比如我们最常用的群组选择器在时才被支持，并且还支持了很多我们没有想到的选择器，如子元素选择器，属性选择器，了解后你会发现还是挺了不起的。前言上一篇系列文章整理了CSS选择器的基础使用方法，因为内容较多且细致，写了很多DEMO，目前将它整理成适合移动端浏览器的CSS选择器的参考手册，方便学习CSS的人参考使...

y1chuan 2019-08-28 18:16 评论0 收藏0
移动端滚动研究

摘要：还会有一个性能上的问题就是当页面的列表过长，元素过多时，在模拟滚动，下拉刷新这段时间内，页面也会有卡顿现象，这里采取了一个优化策略即列表较长时数量较多时，在触发下拉刷新的时机时将页面视窗之外的元素隐藏或者存放在里面。移动web滚动问题在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的...

ghnor 2019-08-23 14:32 评论0 收藏0
第六天移动端Web开发注意事项

摘要：随着移动互联网的发展，移动已经逐渐成为互联网的主要入口，随之而来的是前端在移动开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结，必然不可能涉及方方面面，但会随着笔者的积累持续更新。随着移动互联网的发展，移动Web已经逐渐成为互联网的主要入口，随之而来的是前端在移动Web开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动Web开发需要注意...

妤锋シ 2019-08-30 13:09 评论0 收藏0
第六天移动端Web开发注意事项

摘要：随着移动互联网的发展，移动已经逐渐成为互联网的主要入口，随之而来的是前端在移动开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结，必然不可能涉及方方面面，但会随着笔者的积累持续更新。随着移动互联网的发展，移动Web已经逐渐成为互联网的主要入口，随之而来的是前端在移动Web开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动Web开发需要注意...

xbynet 2019-08-01 15:58 评论0 收藏0
CSS遮罩层：hover状态丢失及解决方案

摘要：在时，亦可进一步改变该遮罩层的色彩和透明度。遮罩层实现及状态丢失问题代码代码在时，如果快速点击鼠标，可能会丢失的效果。状态丢失的简单解决方案基本思路是，点击鼠标时给添加，强制它显示里的样式。 CSS遮罩层，顾名思义就是在div上，再铺一层半透明的div。在hover时，亦可进一步改变该遮罩层的色彩和透明度。我们可以通过css定位和背景色实现。 CSS遮罩层实现及hover状态丢失问题 ...

vincent_xyb 2019-08-21 12:02 评论0 收藏0