CODEWITHSUNDEEP
htmlcsshover
user45758
user45758

Reputation: 3

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

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

Upvotes: 0

Views: 968

Answers (1)

Jhey
Jhey

Reputation: 1377

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!

Upvotes: 2

Related Questions