.li悬停并为.a和span着色

Question

我希望在鼠标悬停时使用例如.a和span红色，在我的情况下，如果将.a悬停，则可以使用，但是如果将鼠标悬停在span箭头上，则只有span箭头将为红色。

.menu li:hover {
  color: red;
}

.menu a:hover {
  color: red;
}

<div class="menu">
  <ul>
    <li id="menu-item">
      <a href="">Blog</a>
      <span class="sub-menu-open">▲</span>
    </li>
  </ul>
</div>

https://jsfiddle.net/fgydznrx/

Answer 1

您只需要一个选择器，当li悬停时，选择a并为其上色。

.menu li:hover>a {
  color: red;
}

演示

.menu li:hover {
  color: red;
}

.menu li:hover>a {
  color: red;
}

.menu a:hover {
  color: red;
}

<div class="menu">
  <ul>
    <li id="menu-item">
      <a href="">Blog</a>
      <span class="sub-menu-open">▲</span>
    </li>
  </ul>
</div>

Answer 2

之所以会发生这种情况，是因为<a>元素在悬停时有其自己的样式，并且您需要显式覆盖它才能对悬停产生不同的影响。

在这种情况下，您希望其颜色与父级相同。因此，您可以应用color: inherit来获得结果：

.menu li:hover {
  color: red;
}

a {
  color: inherit;
}

.menu a:hover {
  color: red;
}

<div class="menu">
  <ul>
    <li id="menu-item">
      <a href="">Blog</a>
      <span class="sub-menu-open">▲</span>
    </li>
  </ul>
</div>