css - .li 悬停并着色 .a 和跨度

Question

我希望在悬停时具有例如红色的 .a 和跨度，在我的情况下，如果悬停 .a 则它会起作用，但如果您将鼠标悬停在跨度箭头上，则只有跨度箭头将为红色。

.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>