在悬停到具有不同类的元素时,将样式添加到列表元素

Question

我通过以下方式标记了导航:

<nav>
  <ul>
    <li class="first-item"><a href="main.html"> Home </a></li>
    <li class="second-item"><a href="menu.html"> Menu </a></li>
    <li class="third-item"><a href="why-us.html">Why us? </a></li>
    <li class="fourth-item"><a href="contact.html"> Contact </a></li>
  </ul>
</nav>

它的设置方式是第三项li添加了一些样式(框阴影),因为它是指示用户当前位置的活动元素.它还使列表元素的其余部分更加透明.

在悬停在任何其他li上时,我希望第三项li没有框阴影,并且悬停的任何元素都添加了一些样式,但似乎没有使用ul li:hover .third-item.

这是CSS:

ul li:not(.third-item) {
 opacity: 0.8;
}

ul li.third-item {
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  z-index: 10;
  position: relative;
}

ul li:hover {
  opacity: 1;
  box-shadow: 0 0 4px 5px rgba(0, 0, 0, 0.2);
}

ul li:hover .third-item {
  box-shadow: none;
}

Answer 1

使用规则,ul li:hover .third-item您将在目标.third-item内部li:hover.但那个元素不存在.

相反,将鼠标悬停在父级上ul.

因此ul li:hover .third-item变得ul:hover .third-item.只要您将鼠标悬停在列表中,第三个元素的样式就会被覆盖.

这样可行,但您可能希望将悬停效果放在第三个项目上.因此,您需要添加ul:hover .third-item:hover到ul li:hover规则中.

ul li:not(.third-item) {
 opacity: 0.8;
}

ul li.third-item {
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  z-index: 10;
  position: relative;
}
ul li:hover,
ul:hover .third-item:hover {
  opacity: 1;
  box-shadow: 0 0 4px 5px rgba(0, 0, 0, 0.2);
}
ul:hover .third-item {
  box-shadow: none;
}

<nav>
  <ul>
    <li class="first-item"><a href="main.html"> Home </a></li>
    <li class="second-item"><a href="menu.html"> Menu </a></li>
    <li class="third-item"><a href="why-us.html">Why us? </a></li>
    <li class="fourth-item"><a href="contact.html"> Contact </a></li>
  </ul>
</nav>