在如下代码中，利用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，使其拥有最高权限！