关于hover失效问题（！important）

在如下代码中，利用JS更改div的高宽后，导致内部a标签hover效果失效：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title><style>* {margin: 0px;padding: 0px;}#header {margin-left: 50px;height: 800px;width: 95%;background-color: cadetblue;}#tad,#content1,#tstore,#tinter,#tnv,#tgame,#thome,#thouse,#tout,#tlike{margin-left: 50px;height: 200px;width: 87%;background-color: yellowgreen;position: absolute;top: 830px;font-size: 20px;font-weight: 900;padding-left: 100px;}#content1,#tstore,#tinter,#tnv,#tgame,#thome,#thouse,#tout,#tlike{height: 600px;background-color: darkgoldenrod;top: 1050px;}#tstore {background-color: chartreuse;top: 1670px;}#tinter {background-color: dodgerblue;top: 2300px;}#tnv {background-color: lightpink;top: 2920px;}#tgame {background-color: skyblue;top: 3550px;}#thome {background-color: darkgoldenrod;top: 4170px;}#thouse {background-color: chocolate;top: 4800px;}#tout {background-color: darkkhaki;top: 5430px;}#tlike {background-color: firebrick;top: 6050px;}#snav {height: 0px;width: 0px;position: fixed;top: 100px;transition:width 0.4s, height 0.3s;overflow: hidden;}.nav,.navc {display: block;background-color: #ff0036;height: 40px;width: 100%;text-align: center;padding-top: 15px;text-decoration: none;color: white;margin-bottom: 5px;font-size: 13px;}.navc {padding-top: 5px;background-color: #626262;font-size: 13px;}a#n1:hover{background-color: #64c333 !important;}a#n2:hover{background-color: #ff0036 !important;}a#n3:hover{background-color: #ea5f8d !important;}a#n4:hover{background-color: #0aa6e8 !important;}a#n5:hover{background-color: #64c333 !important;}a#n6:hover{background-color: #f15453 !important;}a#n7:hover{background-color: #0aa6e8 !important;}a#n8:hover{background-color: #ff0036 !important;}</style>
</head><body><a name="top"></a><div id="header">顶部</div><div id="tad">顶部广告</div><div id="snav"><a href="javascript:void(0)" class="nav">导航</a><a href="#tstore" class="navc" id="n1">天猫<br/>超市</a><a href="#tinter" class="navc" id="n2">天猫<br/>国际</a><a href="#tnv" class="navc" id="n3">美丽<br/>人生</a><a href="#tgame" class="navc" id="n4">潮电<br/>酷玩</a><a href="#thome" class="navc" id="n5">居家<br/>生活</a><a href="#thouse" class="navc" id="n6">打造<br/>爱巢</a><a href="#tout" class="navc" id="n7">户外<br/>出行</a><a href="#tlike" class="navc" id="n8">猜你<br/>喜欢</a><a href="#top" class="navc" id="n9">返回<br/>顶部</a></div><div id="content1">第一内容区</div><a name="tstore"></a><div id="tstore">天猫超市</div><a name="tinter"></a><div id="tinter">天猫国际</div><a name="tnv"></a><div id="tnv">美丽人生</div><a name="tgame"></a><div id="tgame">潮电酷玩</div><a name="thome"></a><div id="thome">居家生活</div><a name="thouse"></a><div id="thouse">打造爱巢</div><a name="tout"></a><div id="tout">户外出行</div><a name="tlike"></a><div id="tlike">猜你喜欢</div><script>var tstore = document.getElementById("tstore");var tinter = document.getElementById("tinter");var tnv = document.getElementById("tnv");var tgame = document.getElementById("tgame");var thome = document.getElementById("thome");var thouse = document.getElementById("thouse");var tout = document.getElementById("tout");var tlike = document.getElementById("tlike");var n1 = document.getElementById("n1");var tstore_top = tstore.offsetTop-400;//随元素的位置、高度的改变而改变var tstore_bottom = tstore.offsetHeight+tstore.offsetTop-400;var n2 =  document.getElementById("n2");var tinter_top = tinter.offsetTop-400;var tinter_bottom = tinter.offsetHeight+tinter.offsetTop-400;var n3 = document.getElementById("n3");var tnv_top = tnv.offsetTop-400;var tnv_bottom = tnv.offsetHeight+tnv.offsetTop-400;var n4 = document.getElementById("n4");var tgame_top = tgame.offsetTop-400;var tgame_bottom = tgame.offsetHeight+tgame.offsetTop-400;var n5 = document.getElementById("n5");var thome_top = thome.offsetTop-400;var thome_bottom = thome.offsetHeight+thome.offsetTop-400;var n6 = document.getElementById("n6");var thouse_top = thouse.offsetTop-400;var thouse_bottom = thouse.offsetHeight+thouse.offsetTop-400;var n7 = document.getElementById("n7");var tout_top = tout.offsetTop-400;var tout_bottom = tout.offsetHeight+tout.offsetTop-400;var n8 = document.getElementById("n8");var tlike_top = tlike.offsetTop-400;var tlike_bottom = tlike.offsetHeight+tlike.offsetTop-400;var snav = document.getElementById("snav");var snavshow = document.getElementById("content1").offsetTop+200;window.onscroll=function(){var h = window.scrollY;if(h>=tstore_top&h<=tstore_bottom){n1 .style.backgroundColor="#64c333";        }else{n1.style.backgroundColor="#626262";    }if(h>=tinter_top&h<=tinter_bottom){n2.style.backgroundColor="#ff0036";}else{n2.style.backgroundColor="#626262";    }if(h>=tnv_top&h<=tnv_bottom){n3.style.backgroundColor="#ea5f8d";}else{n3.style.backgroundColor="#626262";    }if(h>=tgame_top&h<=tgame_bottom){n4.style.backgroundColor="#0aa6e8";}else{n4.style.backgroundColor="#626262";    }if(h>=thome_top&h<=thome_bottom){n5.style.backgroundColor="#64c333";}else{n5.style.backgroundColor="#626262";    }if(h>=thouse_top&h<=thouse_bottom){n6.style.backgroundColor="#f15453";}else{n6.style.backgroundColor="#626262";    }if(h>=tout_top&h<=tout_bottom){n7.style.backgroundColor="#0aa6e8";}else{n7.style.backgroundColor="#626262";    }if(h>=tlike_top&h<=tlike_bottom){n8.style.backgroundColor="#ff0036";}else{n8.style.backgroundColor="#626262";    }//下面的这部分代码就是导致hover失效的元凶if(h<=snavshow){snav.style.width = "0px";snav.style.height = "0px";}if(h>=snavshow){snav.style.width = "50px";/*如果只改变width或height，可以实现生长效果 注：css的transition也要同时改变*/snav.style.height = "510px";}}    </script>
</body>
</html>

解决方法：

给a标签hover内的代码添加！important，使其拥有最高权限！

转载于:https://www.cnblogs.com/whwjava/p/8858696.html

关于hover失效问题（！important）相关推荐

css 点击(onMouseDown和onMouseUp)后,hover失效
希望结果正常情况蓝色,悬停时浅蓝,onMouseDown时深蓝,onMouseUp时蓝色最初代码 <style> #div{background:蓝色; } #div:hover{ba ...
关于选择器权重导致的a:hover 失效问题
文章目录引言练习 css选择器优先级案例引用出处引言我在网上看视频自学前端,做到css选择器的一个小练习时遇到了一些问题,把它记录下来,如果你有此问题的朋友可以看看,希望能帮到大家! 我在写 ...
html中hover无法触发,如何让css hover 失效
让css hover失效的原因:1.在CSS定义中,"a:hover"没有被置于"a:link"和"a:visited"之后:2.在CSS定 ...
html中hover无法触发,CSS hover失效的原因总结
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 最近碰到了一个设置h标签的hover失效问题,找了些资料,趁此机会做个总结在 CSS 定义中,它们同时存在的时候,a: ...
JQuery利用css()修改样式后 hover失效的解决办法
执行完代码后发现写在样式表中的hover效果失效,改了好几遍差点重新写函数,后来发现很简单,是优先级的问题,css()中的内容覆盖了之前的样式只需要在样式后写!important即可解决! 1 .f ...
css hover失效的解决方法
在开发vue项目时,element-plus按钮的focus样式不是我想要的,然后就想覆盖它的样式,但是发现元素hover效果失效,我的写法是这样的: .close-pop-btn{position: ...
关于hover失效的问题
昨天在写静态网页的过程中发现有时候hover会不起作用,后面去查阅了资料,总结大概有以下原因: 一. :hover前加了空格或使用了中文冒号 css .abc{margin: 10px 20px 30 ...
微信小程序中好看的按钮样式（渐变色）、view的点击变色效果、按钮漂亮的圆角边框、解决hover设置失效
好看1: .wxss /* 从上往下渐变 */ .bt_1{margin-top: 40rpx;background: linear-gradient(#ccfbff, #ef96c5); } 好看2 ...
Qt cef3 无边框程序最小化之后，再打开 hover 状态失效
1. 使用qt + cef3 开发的 pc 桌面程序出现一个奇怪的问题,描述如下: 1. 程序最小化之后,再最大化,所有Qt 按钮的hover状态都失效. 2. hover 失效后的程序,showNo ...

关于hover失效问题（！important）

关于hover失效问题（！important）相关推荐

最新文章

热门文章