Question

我有以下html

<ul>
  <li class="main"> Main 1
    <ul>
      <li class="sub">Sub 1</li>
      <li class="sub">Sub 2</li>
      <li class="sub">Sub 3</li>
    </ul>
  </li>
  <li class="main"> Main 2 </li>
  <li class="main">Main 3 </li>  
</ul>

我希望鼠标悬停时第一级更改background-color。但是当我尝试这段代码时

.main:hover {
  background-color: red;
}

.sub:hover {
  background-color: none;
}

次级菜单也会改变。有没有办法只改变外部元素的背景。

此代码可以在此codepen中看到。 http://codepen.io/anon/pen/Bvauf

Answer 1

您所看到的是.main的背景，因为孩子们的背景是透明的。你可以明确地将它设置为白色：

.main:hover {
  background-color: red;
}

.main:hover > ul {
  background-color: #fff;
}

或者

.main ul {
  background-color: #fff;
}

Answer 2

.sub {
  background-color: white;
}

您应该将背景颜色设置为ul而不是像其他人建议的那样设置

Css背景颜色与子菜单

2 个答案: