html - 在悬停到具有不同类的元素时向列表元素添加样式

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，您的目标是 li:hover 内的 .third-item。但该元素不存在。

相反，将鼠标悬停在父 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>