如何设置图标的背景颜色以及如何在cs上悬停在li背景颜色上时也使用css获得与图标背景颜色相同的颜色

Question

我想将图标的背景色设置为灰色，并且每当我将鼠标悬停在“ li”的li背景色上时 也会变成灰色，但是我定义的CSS无法正常工作？

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

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />

<ul class="main-menu">
  <li class="apps1">
    <a href="#">
      <span class="fa fa-home"></span>
      <span class="text">Dashboard</span>
    </a>

  </li>
</ul>

Answer 1

以下内容将在li元素上悬停时将灰色背景应用于该元素。由于该图标是该元素的子元素，因此它也将显示为灰色背景。

.main-menu li:hover {
  background-color: grey;
}

.main-menu li a .fa {
  color: grey;
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />

<ul class="main-menu">
  <li class="apps1">
    <a href="#">
      <span class="fa fa-home"></span>
      <span class="text">Dashboard</span>
    </a>

  </li>
</ul>