css - 当子元素被突出显示时，CSS 突出显示父元素

Question

当我孩子或孙子悬停时，是否有一种仅用于突出显示父菜单项的 CSS 方法。

例如。

<ul>
  <li><a href="link">Item 1</a>
    <ul>
      <li><a href="link">Item 1.1</a></li>
      <li><a href="link">Item 1.2</a></li>
      <li><a href="link">Item 1.3</a></li>
    </ul>
  </li>
</ul>

所以在上面的例子中，当“Item 1.1”、“Item 1.2”或“Item 1.3”悬停在上面时，我可以用样式定位“Item 1”吗？

谢谢。

Answer 1

您可以将 :hover 应用于元素...悬停子项也意味着鼠标“悬停”在父项上。

在给出的简单情况下。

li:hover{font-weight: bold;}

现在你想限制子元素不被悬停

li:hover li{font-weight: normal}

现在您需要重新突出显示悬停的子项。

li:hover li:hover{font-weight: bold;}

JSFiddle 示例