为什么 <li> 元素悬停在图像上后将鼠标悬停在元素上时，颜色和宽度不会改变吗？

Question

这是引起麻烦的代码段：

 function focuss() { var x = document.getElementsByTagName("li"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "yellow"; x[i].style.color = "red"; x[i].style.width = "340px"; x[i].style.left = "-25px"; } } function unfocuss() { var x = document.getElementsByTagName("li"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; x[i].style.color = "white"; x[i].style.width = "290px"; x[i].style.left = "0px"; } } 

 li { display: block; background-color: red; height: 33px; border-radius: 7px; width: 290px; position: relative; left: 0px; font-size: 21px; text-align: center; margin-top: 3px; } li:hover { width: 340px; left: -25px; background-color: yellow; color: red; } 

 <ul> <a> <li>GALLERY</li> </a> <a> <li>STATISTICS</li> </a> <a> <li>PLACES TO VISIT</li> </a> <a> <li>HOME</li> </a> </ul> <img src="f1.jpg" id="img1" onmouseover="focuss()" onmouseout="unfocuss()"> 

加载页面后，当我将鼠标直接悬停在<li>上时，这些<li>元素的样式会更改。 但是，一旦将鼠标悬停在图像上，然后再次悬停在<li> ，就没有任何变化。 我究竟做错了什么？

Answer 1

在这种情况下，您在unfocuss（）方法中应用的内联样式将覆盖CSS：hover样式。 我在悬停CSS中使用！important复制了您的示例。 我建议您谨慎使用！important，但它可以解决您所说的特定问题。

 function focuss() { var x = document.getElementsByTagName("li"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "yellow"; x[i].style.color = "red"; x[i].style.width = "340px"; x[i].style.left = "-25px"; } } function unfocuss() { var x = document.getElementsByTagName("li"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; x[i].style.color = "white"; x[i].style.width = "290px"; x[i].style.left = "0px"; } } 

 li { display: block; background-color: red; height: 33px; border-radius: 7px; width: 290px; position: relative; left: 0px; font-size: 21px; text-align: center; margin-top: 3px; } li:hover { width: 340px !important; left: -25px !important; background-color: yellow !important; color: red !important; } 

 <ul> <a> <li>GALLERY</li> </a> <a> <li>STATISTICS</li> </a> <a> <li>PLACES TO VISIT</li> </a> <a> <li>HOME</li> </a> </ul> <img src="f1.jpg" id="img1" onmouseover="focuss()" onmouseout="unfocuss()"> 

Answer 2

正如Khris所指出的那样，您手动添加的样式正在破坏CSS中的样式。

而不是操纵样式，而是修改元素的类。 这是一种更干净，更少冗余的方法：

 function focuss() { var x = document.getElementsByTagName("li"); var i; for (i = 0; i < x.length; i++) { x[i].classList.add('highlight'); } } function unfocuss() { var x = document.getElementsByTagName("li"); var i; for (i = 0; i < x.length; i++) { x[i].classList.remove('highlight'); } } 

 li { display: block; background-color: red; height: 33px; border-radius: 7px; width: 290px; position: relative; left: 0px; font-size: 21px; text-align: center; margin-top: 3px; } li:hover, li.highlight { width: 340px; left: -25px; background-color: yellow; color: red; } 

 <ul> <a> <li>GALLERY</li> </a> <a> <li>STATISTICS</li> </a> <a> <li>PLACES TO VISIT</li> </a> <a> <li>HOME</li> </a> </ul> <img src="f1.jpg" id="img1" onmouseover="focuss()" onmouseout="unfocuss()"> 

Answer 3

在onmouseout()时重置内联样式

 function focuss() { var x = document.getElementsByTagName("li"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "yellow"; x[i].style.color = "red"; x[i].style.width = "340px"; x[i].style.left = "-25px"; } } function unfocuss() { var x = document.getElementsByTagName("li"); var i; for (i = 0; i < x.length; i++) { x[i].style = ""; } } 

 li { display: block; background-color: red; height: 33px; border-radius: 7px; width: 290px; position: relative; left: 0px; font-size: 21px; text-align: center; margin-top: 3px; } li:hover { width: 340px; left: -25px; background-color: yellow; color: red; } 

 <ul> <a> <li>GALLERY</li> </a> <a> <li>STATISTICS</li> </a> <a> <li>PLACES TO VISIT</li> </a> <a> <li>HOME</li> </a> </ul> <img src="f1.jpg" id="img1" onmouseover="focuss()" onmouseout="unfocuss()"> 

Answer 4

您可以跳过脚本并使用CSS flexbox

 .flex { display: flex; flex-direction: column; } .flex img { order: 1 } li { display: block; background-color: red; height: 33px; border-radius: 7px; width: 290px; position: relative; left: 0px; font-size: 21px; text-align: center; margin-top: 3px; } img:hover + ul li, li:hover { width: 340px; left: -25px; background-color: yellow; color: red; } 

 <div class="flex"> <img src="f1.jpg" id="img1"> <ul> <li> <a>GALLERY</a> </li> <li> <a>STATISTICS</a> </li> <li> <a>PLACES TO VISIT</a> </li> <li> <a>HOME</a> </li> </ul> </div>