当突出显示子项时，CSS会突出显示父元素

Question

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

EG。

<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>

因此，在上面的示例中，当“项目1.1”，“项目1.2”或“项目1.3”悬停在上面时，我可以使用样式定位“项目1”吗？

感谢。

Answer 1

你可以申请：将鼠标悬停在元素上......将孩子悬停在一起也意味着鼠标“超过”父母。

在给出的简单案例中。

li:hover{font-weight: bold;}

现在你想要限制没有悬停在

上的子元素

li:hover li{font-weight: normal}

现在你需要重新突出悬停的孩子们。

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

JSFiddle example