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>