Как изменить значок маркера <li>при наведении на него ярлыка?

Question

В моем списке <ul> есть несколько <li> с <a> тегами в них.

Я хочу изменить цвет значков li bullet при наведении курсора на тег <a> (я имею в виду маркеры рядом с <li>)

Я пытался

a:hover {
    color:red;
}

, но это не влияет на значок <li>.

Я тоже пытался

ul li:hover{
    color:red;
}

Но это не работает идеально, потому что когда мышь перемещается к тегу <a>, а не к нему <li>, и пули начинают менять цвет.

Answer 1

Я пробовал что-то, связанное с вашим вопросом, и оно отлично работает. Чтобы решить проблему с li: hover, а не с зависшей ссылкой, вы должны установить display: block, как показано ниже, чтобы он занимал полную ширину.

ul li a {
  color: black;
  display: block
}

ul li:hover {
  color: red;
}

ul li:hover a {
  color: black;
}

<ul>
  <li><a href="#">Value 1</a></li>
  <li><a href="#">Value 2</a></li>
  <li><a href="#">Value 3</a></li>
</ul>

Answer 2

твой код на самом деле работал для меня.

<ul>
  <li>
    <a href="#">A</a>
  </li>
  <li>
    <a href="#">B</a>
  </li>
  <li>
    <a href="#">C</a>
  </li>
</ul>

CSS:

ul li:hover{
  color:red;
}

Скрипка: https://jsfiddle.net/tox9je8n/