当鼠标悬停在li上时，如何更改链接的颜色：之前？

Question

当我将鼠标悬停在由li：选择器创建的部件上时，我想更改链接的颜色。这是片段

ul li {
  display: inline-block;
  float: right;
  margin: 10px 55px 0px 55px;
  font-size: 35px;
  position: relative;
  top: -26px;
  left: -10%;
  height: 100%;
  transition: 0.5s ease;
  font-family: impact;
  letter-spacing: 2;
}
ul li:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  bottom: 0;
  left: 0;
  background-color: red;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.`25s ease-in-out 0s;
}
a {
  text-decoration: none;
  display: block;
  color: black;
}
a:hover {
  color: red;
}
ul li:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
}
ul li:hover {
  background-color: yellow;
  -webkit-transition: background-color 0s;
  -moz-transition: background-color 0s;
  color: red;
}

<ul>
  <li><span><a href="">HOME</a></span>
  </li>
  <li><span><a href="">PLACES &nbsp; TO &nbsp; VISIT</a></span>
  </li>
  <li><span><a href="">STATISTICS</a></span>
  </li>
  <li><span><a href="">GALLERY</a></span>
  </li>
</ul>

这里，当鼠标悬停在文本上方时，颜色会发生变化，并且会出现最初但隐藏的下划线。下划线是由li：选择器之前做出的。当我将鼠标悬停在下划线上时，文本的颜色会变回白色（我不想要）。如何防止这种颜色变化？

Answer 1

那是因为你不再在链接上盘旋......所以它当然会失去它的悬停效果。为什么不使用a：而不是......问题解决了

ul li {
  display: inline-block;
  float: right;
  margin: 10px 55px 0px 55px;
  font-size: 35px;
  position: relative;
  top: -26px;
  left: -10%;
  height: 100%;
  transition: 0.5s ease;
  font-family: impact;
  letter-spacing: 2;
}
ul li a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  bottom: 0;
  left: 0;
  background-color: red;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.`25s ease-in-out 0s;
}
a {
  text-decoration: none;
  display: block;
  color: black;
}
a:hover {
  color: red;
}
ul li:hover a:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
}
ul li:hover {
  background-color: yellow;
  -webkit-transition: background-color 0s;
  -moz-transition: background-color 0s;
  color: red;
}

<ul>
  <li><span><a href="">HOME</a></span>
  </li>
  <li><span><a href="">PLACES &nbsp; TO &nbsp; VISIT</a></span>
  </li>
  <li><span><a href="">STATISTICS</a></span>
  </li>
  <li><span><a href="">GALLERY</a></span>
  </li>
</ul>

Answer 2

您可以在LI悬停时设置A的颜色，查看并测试选择器的更新：

/* a:hover, */ li:hover  a {
  color: red;
}

ul li {
  display: inline-block;
  float: right;
  margin: 10px 55px 0px 55px;
  font-size: 35px;
  position: relative;
  top: -26px;
  left: -10%;
  height: 100%;
  transition: 0.5s ease;
  font-family: impact;
  letter-spacing: 2;
}
ul li:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  bottom: 0;
  left: 0;
  background-color: red;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.`25s ease-in-out 0s;
}
a {
  text-decoration: none;
  display: block;
  color: black;
}
li:hover a{
  color: red;
}
ul li:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
}
ul li:hover {
  background-color: yellow;
  -webkit-transition: background-color 0s;
  -moz-transition: background-color 0s;
  color: red;
}

<ul>
  <li><span><a href="">HOME</a></span>
  </li>
  <li><span><a href="">PLACES &nbsp; TO &nbsp; VISIT</a></span>
  </li>
  <li><span><a href="">STATISTICS</a></span>
  </li>
  <li><span><a href="">GALLERY</a></span>
  </li>
</ul>