.li парить и раскрашивать .a и span

Question

Я хочу, чтобы при наведении указывалось, например, на красный цвет .a и span, и в моем случае это работает, если .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

Это происходит потому, что элемент <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>

Answer 2

Вам просто нужен еще один селектор, когда li наведете, выберите a и раскрасьте его тоже.

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

DEMO

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