css - .li 悬停和着色 .a 和 span

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">▲&lt;/span>
    </li>
  </ul>
</div>

https://jsfiddle.net/fgydznrx/

标签： csscss-selectors

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">▲&lt;/span>
    </li>
  </ul>
</div>