js添加样式后优先级高于hover的解决办法

最新推荐文章于 2023-05-11 21:18:33 发布
最新推荐文章于 2023-05-11 21:18:33 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34024244/article/details/78683763
版权

为按钮添加document.getElementById("loginButton").style.backgroundColor = "#ffffff";背景色

发现css的hover无效了，因为js的优先级高于css，解决办法是将.loginbtn_1:hover{background:#1f7ed3; }

改为.loginbtn_1:hover{background:#1f7ed3 !important;}

!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。使用!important的css是拥有最高的优先级的。这样hover的样式就不会被我们写的其他样式覆盖掉了



Heroin_s
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现hover效果
雪糕
02-25 1万+
js实现鼠标移到指定标签时显示/隐藏指定标签 <a id="but">鼠标经过按钮</a> <div id="box">需要显示/隐藏的标签</div> <script> (function(){ var btn = document.getElementById('login-btn'); var box = document....
js动态添加hover事件
热门推荐
welcome to my blog!
10-22 2万+
通常前端css鼠标滑过，离开的事件加在css,scss,less中，但是比较复杂的情景，比如鼠标滑入触发多个事件亦或者其它元素的样式变化，如阴影，遮罩层，边框等等。这个时候JS控制hover事件是最好的选择，下面插入一段自己经常用到的特效，仅供参考。 直接上代码。 <!DOCTYPE html> <html lang="en"> <hea...
JS实现css的hover效果，兼容移动端
砷碲 - Shendi
03-07 5681
CSS的hover即触碰时触发，在电脑端鼠标触碰，移动端手指触摸有的时候光靠css实现不了一些效果，例如元素触发hover，其他元素触发动画效果，所以需要使用到js。
jQuery在js里动态修改样式和hover()方法 (入门)
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-11 1663
半杯不啰嗦，希望能够帮助有需要的那个人！
css样式的优先级+ 伪类选择器:hover+选择器
web全栈开发的博客
12-10 917
1、样式表的优先级： 内联样式 》 内部样式 内联样式 》 外部样式 外部样式 和内部样式，谁写在后面，谁的优先级比较高 2、伪类选择器； a:link {color: red;} /* 未访问的链接状态 / a:visited {color: green;} / 已访问的链接状态 / a:hover {color: blue;} ...
css样式优先级及层叠的顺序排序探讨
09-22
当定义链接的伪类样式时，`a:active`的优先级高于`a:hover`，`a:hover`高于`a:visited`，而`a:link`是默认的优先级。这种顺序是固定的，改变它们的声明顺序不会影响优先级。 综上所述，CSS样式优先级的判断基于选择...
css 样式加载的优先级使用经验分享
09-22
内联样式优先级高于ID、类、属性、伪类和元素选择器，但低于`!important`。 3. **ID选择器（#id）**： ID选择器通过`#`标识，如 `.example`，具有较高的优先级。一个HTML元素只能有一个ID，因此ID选择器通常用于...
CSS hover不起作用的原因
12-11
解决这些问题的方法通常包括检查CSS选择器的顺序、优先级、层叠规则以及JavaScript代码，确保`hover`状态的样式能够正确地应用到目标元素上。在开发过程中，使用浏览器的开发者工具可以帮助定位和解决问题，观察元素...
javascript-calculator-
07-24
例如，乘法和除法的优先级高于加法和减法。这可以通过栈（stack）数据结构来实现，先进后出（LIFO）的特性非常适合处理运算符的优先级问题。 9. **小数点处理** 处理小数点时，我们需要确保输入的数字格式正确，...
05-渲染流程（上）：HTML、CSS和JavaScript，是如何变成页面的？_For_vip_user_0011
08-04
例如，行内样式（`style`属性）的优先级高于外部或内部样式表，而ID选择器的特异性高于类选择器，类选择器又高于标签选择器。 在计算样式时，浏览器还会处理CSS的相对单位（如`em`、`rem`）和百分比单位，以及解析...
js 图片 hover动态显示另外一张图片特效
06-11
一段简洁代码即可实现的js图片hover效果 当鼠标移动到图片上后，动态显示另外一张（高版本浏览器下效果较好） 使用方法： 1、在网页head中引入两个css样式 2、将代码部分复制到你需要的地方 3、在最底部调用两个js文件即可
js 关于如何动态设置css的hover样式最佳方式，设置hover样式
PrimaryColor
11-16 5430
网上很多方式都是采用js监听dom的鼠标移入（onmouseover）移出（onmouseout）事件，进行控制这个dom的hover样式。消耗性能先不说，代码也很庞大，再加上如果是自定义主题（修改后能立马看到效果的，不是需要刷新）的功能可能就更麻烦了，要给所有的dom都绑定这样的事件。
CSS选择器优先级
qq_40920910的博客
02-14 5093
CSS选择器优先级 工作中修改css样式时，是不是会经常遇到 写的css样式不生效 改这个地方结果别的地方样式也跟着一起变了 明明是一样的css代码为啥换个地方就不一样了 改了个标签结果把样式改乱了… ​ 几乎所有的样式冲突、样式覆盖等问题都与css声明的优先级错位有关 ​ 那css优先级的计算规则是什么？ 如何避免样式冲突、样式覆盖的问题呢 ​ css选择器的基本概念 1 选择器、选择符、伪类、伪元素 1 选择器 标签选择器 div span p li … 类选择器 属性选择器 … 2 选择符
js hover 触发事件_JQ基础（5）事件的传播
weixin_39658759的博客
11-23 3896
在说明基于通常不可单击的页面元素处理单击事件的能力时，我们构思的界面中已经给出了一些提示——样式表切换器标签（即元素）实际上都是活动的，随时等待用户操作。为了改进界面，我们可以为按钮添加一种翻转状态，以便清楚地表明它们能与鼠标进行某种方式的交互： .hover { cursor: pointer; background-color: #afa; } CSS规范加入了一个名叫:ho...
近期用到的资料 -- JS小问题
Benxiaohai_311的博客
06-21 1356
js(jq)移除hover选择器 js 动态添加 disabled 属性 用 jquery 或原生 js 添加 hover 属性
js实现hover样式，适用于只需要为单个元素添加少量样式的情况
郑伟斌的博客
08-26 3482
1.简介 在网页开发中一个元素的鼠标悬停样式常常由伪类:hover来控制，而当我们用js生成一个DOM元素时想要给它添加hover样式的话就显得比较麻烦，常规方法是先给它添加一个类名，然后往页面中新增一个style便签，标签内定义伪类hover的样式。 2.代码实现 这里采用mousenter和mouseleave的监听来实现hover样式。代码如下: var dc = { //设置元素的hov...
如何调试JS中鼠标悬停事件影响的元素？
ice breaker's blog
07-21 3365
鼠标悬停俗称hover，它会在鼠标指针悬停在被选元素上时触发。一般前端开发会利用css中的hover伪类选择器，来给被选元素应用不同的样式，从而增强用户的体验感。最常见的例子就是Button。
用 jquery 或原生 js 添加 hover 属性
君非道的博客
10-18 5572
用 jquery 给 dom 元素添加 hover // html 代码 <div class="test">请把鼠标放在上面</div> /* * js 代码 * hover 函数接收两个参数，这两个参数也是函数 * 第一个参数是鼠标悬浮时触发，第二个参数是鼠标离开时触发 */ $('.test').hover(function() { // 鼠标悬浮时触发 $('.test').css('color', 'blue') }, function() { // 鼠标离开时触发
伪类样式:hover的优先级
ISaiSai的专栏
04-10 5046
重新学习css优先级 伪类样式的优先级与 类的优先级是一样的都是 3 （ 0 是important 1是行内 2 是id  4是元素和伪元素） 如下DEMO  a:hover 的优先级与  .hehe a 的优先级相同 （a.xixi 的优先级与上两个优先级也相同） 都是 0.0.1.1  html> html> head> meta cha
Systick的中断优先级高于外设中断优先级。
最新发布
07-25
因此，Systick的中断优先级是高于外设中断优先级的。 #### 引用[.reference_title] - *1* *2* [三、STM32中systick中断的优先级](https://blog.csdn.net/m0_63702526/article/details/129672762)[target="_blank" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值