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＆gt; li＆gt; 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;
}

＆＃39;＆gt;＆＃39;指直接的孩子。如果你离开＆＃39;＆gt;＆＃39;你可以获得与选择器匹配的所有子元素。以下是我相信你想要的结果：

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

当你将鼠标悬停在孩子上时，父母仍然会显示悬停样式。

Answer 2

我相信您需要使用JavaScript来实现该特定行为。您无法同时将样式应用于父级和子级。

编辑：再考虑一下，你可以这样做：

.topmenu:hover > li.popout {...} /* Parent styles */
.topmenu:hover li.popout ul {...} /* Child styles */

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

2 个答案: