how can I use CSS to hover over an entire list element including the bullet?

Question

I have a simple list with bullets. I would like to change the color of both the bullet and the text when hovered over. Only the text change color and not the bullet. Here is the HTML and CSS:

<div id="navtop">
    <ul>
    <a href="calendar.html" > 
    <li>Calendar </li>   </a>   
    </ul>
</div>      




#navtop {
     float: right;
     width: 650px;
     font-size: 1.2em;
     padding-left: 30px;    
    padding-bottom: 0px;
    height: 65px;
}


#navtop ul {
    margin-top: 20px;
    margin-left: 70px;

}

#navtop li {
    float: left;
    position: relative;
    padding-left: 10px;
    width: 280px;
}

#navtop a,  #navtop ul  {
    color: #ffd; 
    }


#navtop  ul a:hover ,   
#navtop ul a:active,
#navtop ul  li:hover,
navtop ul li:active 
{color:#f93; }

#navtop ul a:hover  li{
    color:#f93; }

Answer 1

You could achieve something similar to what you're looking for with CSS pseudo elements depending on the bullet style you want and if that can be achieved with a unicode character.

Using list-style: none; and replacing the bullets with CSS pseudo element content gives you control over the color.

I've put together a jsBin with a small example that might be able to help you out here .

You'll see in the example, I've colored the different list items different colors based on a class and then on hover each of them will show an orange bullet and text.

You can also run the following snippet;

 ul { list-style: none; padding : 0; } li { padding-left: 16px; position: relative; } li:before { position: absolute; left : 4px; content: "•"; } li.is--red:before { color: red; } li.is--green, li.is--green:before { color: green; } li:hover, li:hover:before { color: orange; }

 <!DOCTYPE html> <head></head> <body> <ul> <li class="is--red"><a>Some link</a></li> <li class="is--green"><a>Some other link</a></li> <li><a>Some other link</a></li> </ul> </body>

Hope that helps you out!

how can I use CSS to hover over an entire list element including the bullet?

Question

1 answers

solution1
2 ACCPTED 2015-09-14 23:52:41

how can I use CSS to hover over an entire list element including the bullet?

Question

1 answers

solution1 2 ACCPTED 2015-09-14 23:52:41

solution1
2 ACCPTED 2015-09-14 23:52:41