How to change a <li> bullet icon when hovering on a tag in it?

Question

In my <ul> list I have several <li> with <a> tags in them.

I want to change the color of the li bullet icons when hovering on the <a> tag (I mean bullets beside <li> )

I tried

a:hover {
    color:red;
}

but it doesn't affect the <li> bullet icon.

I also tried

ul li:hover{
    color:red;
}

But it doesn't work perfectly because when mouse move to near <a> tag and not on it <li> and the bullets starts to change color.

Answer 1

your code actually worked for me.

<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;
}

Fiddle: https://jsfiddle.net/tox9je8n/

Answer 2

I have tried something related to your question and it works fine. To fix the issue of li:hover not hovering link, you should set to display:block, as below, so that it takes full width.

 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>