css - 将样式应用于父元素和子元素

Question

我有一个仅在 css 中完成的下拉菜单，按以下方式完成:

.top-menu
{
  padding:0;
  margin:0;
  list-style: none;
  height:50px;
}  

.top-menu > li > a
{
  display:block;
  text-decoration:none;
  font-size:16px;
  line-height:16px;
  padding:15px 20px;
  border: 1px solid transparent;
  color:#fff;
}

.top-menu > li > a:hover
{
  background-color: #fff;
  color: #333;
  border: 1px solid #004488;
}


.top-menu > li.popout:hover ul
{
  display:block;
}

“top-menu”类用于顶级 ul 元素。

我想做的是当我将鼠标悬停在弹出窗口 ul 上时应用“.top-menu > li > a:hover”样式，以便当我将鼠标悬停在其后代上方时，顶级链接也具有悬停样式在下面的 ul 中。谢谢。

这是 html:

<ul class="top-menu">
<li><a href="/">Home</a></li>
    <li>
  <a href="/welcome/">Welcome</a>
  </li>
    <li class="popout">
  <a href="/link2/">link2</a>
  <ul>
      <li><a href="/link2/sublink1/">sublink1</a></li>
      <li><a href="/link2/sublink2/">sublink2</a></li>
    </ul>
  </li>

当我将鼠标悬停在后代 ul(包含 sublink2 和 sublink1)上时，我想为 link2 应用悬停样式

Answer 1

我知道不久前有人问过这个问题，但对于遇到您问题的其他人，我相信您可以通过更改此问题来达到预期的结果:

.top-menu > li > a:hover
{
  background-color: #fff;
  color: #333;
  border: 1px solid #004488;
}

'>' 表示直接子级。如果你离开'>'你可以得到匹配选择器的所有子元素。下面实现了我相信你想要的结果:

ul li:hover > a
{
  background-color: #fff;
  color: #333;
  border: 1px solid #004488;
}

这样，当您将鼠标悬停在子项上时，父项仍会显示悬停样式。