mamal 22

I'm looking for a way to change only an LI's bullet color (not the text of the li) on hover. It is possible to set only the color of bullets with CSS, at least for an entire UL if not for an individual LI. Is there a pure CSS way to change only the bullet color of only the currently hovered LI? Is it only possible if each LI is alone in its own UL? Not sure how this would work. Any thoughts? Barring a pure CSS way to do it, I'm using jQuery, would there be a jQuery way to do it?

6 answers

o.k.w 2355
1
point
This was chosen as the best answer

This is the entire working html page code sample which demostrates using ":hover" css selector to trigger the effect and also have a fallback to use javascript to achieve the same effect for older browsers not supporting ":hover".

Discliamer: I've tested it and both css and script worked but I have not test it on IE6 and older browser though. jQuery is used for convenience sake, can be done with just bare javascript from scratch.

Here's the source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!--[if lte IE 6] >
<script type="text/javascript">
$(document).ready(function(){
  //the following 2 events manages those browsers (i.e. older IE) not supporting ':hover' css selector
  $('#list li').mouseover(function(){
      $(this).addClass('hover');
    });
  $('#list li').mouseout(function(){
      $(this).removeClass('hover');
    });
});
</script>
<[endif]-->
<style type="text/css">
#list li {
  color: blue;
}
#list li span,
#list li:hover span,
#list li.hover span
{
  color: blue;
}

/* li.hover is the selector used for browser not supporting ':hover' */
#list li:hover, 
#list li.hover 
{
  color: red;
}
</style>
</head>
<body>
<ul id="list">
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
  <li><span>item 4</span></li>
</ul>
</body>
</html>

Screenshots (on IE8):
Before Hover

Answered over 4 years ago by o.k.w
2
points

Use an image for your bullet, and then change the image on the :hover psuedo-element.

Answered over 4 years ago by tahdhaze09
  • Yeah, I suppose that's the best solution. mamal over 4 years ago
2
points

first off, older IE's won't respect :hover on anything other than an <a> so you'll need Javascript to simulate the pseudo hover on <li> elements.

In the past I've done this by setting the color on the <li> and wrapping its text content (usually a link or span) in another element that doesn't change color on hover.

pseudo :hover can be done with whatever:hover or by some element targeting with jQuery

Answered over 4 years ago by Tony Crockford
1
point

image + li:hover (it works even in IE 7, just remember that you have to use a strict doctype)

Answered over 4 years ago by Alexandru Bucur
Ax Bar 5
1
point

For a pure CSS approach you could do something like this:

li:hover
{
    color:Red;
}    
ul, li:hover > *
{
    color:Black;
}

It's limited in that you need to wrap the content of your < li> in a < span> (or another tag) and it fails on browsers that don't handle the :hover pseudo class properly.

Answered over 4 years ago by Ax Bar
0
points

I found a great page on how to change the list item image using jQuery. It is super simple and more browser compliant than css.

http://www.ajaxera.com/jquery-change-li-hover/

Answered over 3 years ago by combs1945