Question

以下是导致问题的代码段：

＆＃13;

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";
  }
}

＆＃13;

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;
}

＆＃13;

<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()">

＆＃13;

当我在加载页面后将鼠标悬停在<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>

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

4 个答案: