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>

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

1 个答案: