CODEWITHSUNDEEP
htmlcss
Mohammad Ansari
Mohammad Ansari

Reputation: 1549

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

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.

Upvotes: 0

Views: 617

Answers (2)

Ramesh
Ramesh

Reputation: 2403

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>

Upvotes: 1

Christheoreo
Christheoreo

Reputation: 403

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/

Upvotes: 3

Related Questions