CSS 突出显示子元素时的父元素

Question

当我的 child 或孙子悬停时，是否有一种纯 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 example