html - 如何根据悬停效果设置背景颜色，即当鼠标悬停在为类的背景颜色定义的相同 css 定义中的 li 元素上时？

Question

我要申请background-color至 <li>在悬停时，但悬停效果不适用于我在用于设置元素背景颜色的同一声明 block 中定义的 CSS。如何在不创建其他 CSS 规则的情况下使用逗号分隔的 CSS 实现悬停效果？

.main-menu .acc .fa-home,
.main-menu li:hover>fa-home {
  background-color: #689f38;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<nav class="main-menu">
  <ul>
    <li class="acc">
      <a href="#">
        <i class="fa fa-home fa-2x"></i>
        <span class="nav-text">
          Manage Account
        </span>
      </a>
    </li>
  </ul>
</nav>

Answer 1

问题出在 ...li:hover>fa-home { ... 此处，您的目标是标记元素 fa-home ，你没有(你只有那个名字的类)并且还使用规则 > 代表你的标签元素直接在 li 标签之后，但是你有一个标签

.main-menu .acc .fa-home,
.main-menu li:hover {
    background-color:#689f38;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<nav class="main-menu">
    <ul>
       <li class="acc">
           <a href="#">
               <i class="fa fa-home fa-2x"></i>
               <span class="nav-text">
                   Manage Account
               </span>
           </a>
       </li>
    </ul>
</nav>

如果你在鼠标悬停时想要改变类.fa-home 元素的背景颜色，那么你应该这样做:

..., .main-menu li:hover .fa-home {
  background-color: red;
}