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

Here is the snippet that is causing trouble:

这是引起麻烦的片段:

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

When I hover my mouse directly over the <li>s after loading the page, the styles of these <li> elements change. However, once I hover over the image and then hover over the <li>s again, there is no change. What am I doing wrong?

当我在加载页面后将鼠标直接悬停在

上时,这些

元素的样式会发生变化。但是,一旦我将鼠标悬停在图像上然后再次悬停在

上,就没有变化。我究竟做错了什么?

4 个解决方案

#1

In this case, the inline styles you are applying in the unfocuss() method are overwriting the CSS :hover styles. I've copied your example below with !important in the hover CSS. I would recommend using !important sparingly, but it fixes the specific problem you have stated.

在这种情况下,您在unfocuss()方法中应用的内联样式将覆盖CSS:悬停样式。我在悬停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()">

#2

As Khris points out, your manually-added styles are clobbering the styles in your CSS.

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

Instead of manipulating the styles, modify the elements' classes. This is a much cleaner and less redundant approach:

而不是操纵样式,修改元素的类。这是一种更清洁,更少冗余的方法:

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

#3

Reset the inline styles when onmouseout()

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

#4

You could skip the script and use CSS flexbox

您可以跳过脚本并使用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>