我可以将样式应用于父元素

Question

  

可能重复：
  Style parent li on child li:hover.
  Is there a CSS parent selector?

我有一个中堂菜单。

在li a:hover点#drop-down-menu出现。

我可以在将鼠标悬停在下拉菜单上时将样式应用于li a吗？ 将鼠标悬停在子元素上时，是否可以将样式应用于父元素？

即。我希望border-bottom:2px solid #ffffff;显示在li a下方，而我则将鼠标悬停在#drop-down-menu上。

无法理解。

Answer 1

如果你的锚是 - 或可以 - fullsize（即列表项的大小），那么你可以使用：

li:hover

Answer 2

你需要使用javascript。 CSS不允许任何方式选择父元素。

Answer 3

没有。 CSS不会那样工作。你只能走下去。

但是，如果您的HTML结构正确，则可以达到您想要的效果。

假设以下HTML：

<ul id="main">
  <li><a href="link.php">A dropdown</a>
    <ul class="dropdown">
       <li><a href="link2.php">A submenu</a></li>
    </ul>
  </li>
</ul>

你可以使用以下CSS，它应该可以工作：

#main li:hover a {
  border-bottom: 1px solid black;
}

Here's a (very) rough Fiddle.