How to change backround color and bullet type of li by mouse over?

Hello.

I would like to change backround color and bullet type of li by mouse over.
I have the following HTML code:

                <ul>                  
                  <li>                  
                  <a   href='/referencie/web_stranky'>Web stránky</a>                  
                  <ul>                    
                    <li class='active'>                      
                      <a   href='/referencie/web_stranky/podzlozka1'>Podzlozka1</a>                      
                      <ul>                        
                        <li>                          
                        <a   href='/referencie/web_stranky/podzlozka1/podstranka1_1'>Podstranka1 1 </a>                        
                    </li>                      
                  </ul>                    
                  </li>                  
                </ul>                
                </li>                
                <li>                
                <a   href='/referencie/aplikacie'>Aplikácie</a>                
                </li>                
                </ul> 

Code (markup):

Thanks for any idea.
Jan

 

Using CSS

/*Change the styling of anchors on hover*/
ul li a:hover { 
background-color: #000; /*Change background colour*/
}

Code (markup):

 

Hm, but to change the colour of the bullet, you need to have the hover on the li because the bullet belongs to the li and not the anchor:

ul li:hover {
color: #newcolour;
}

I've never tried this but I guess it could work, to change the type of bullet:
ul li {
list-style: disc;
}

ul li:hover {
list-style-type: square;
}

so, the first and last codes can of course be combined.

Won't work in IE6.

 

Yeah I thought that would be the case for the bullet-type, I guess it'd make more sense just to use a background image and change this on hover if it wasn't being used, to avoid the IE-6 problem and keep the styling on the anchors. Changing bullets on hover would probably look ugly anyway !!

 

Oh new css codes I learns today

 

wd: I like the idea of changing background colours better too.

I can imagine for example a list with little stars as bullets, who get a bit bigger and brighter as you hover the list item...

 

You could use a different image for the hover state for the list like I did on my old Crash Stories site

Here is the CSS:

#crashstorymenu ul {
list-style:none;
margin: 0;
}

#crashstorymenu li{
list-style:none;
width:180px;
text-align:left;
}
#crashstorymenu li a:active, #crashstorymenu li a:link, #crashstorymenu li a:visited {text-decoration: none; color: #940F04; font-weight: bolder; padding-left:16px;
background-image: url(../images/crasharrowoff.jpg); margin: 0;
	background-repeat: no-repeat;
	background-position: left center;
	}

#crashstorymenu li a:hover {
	color: #000033;
	text-decoration: underline;
	background-image: url(../images/crasharrow.jpg);
	background-repeat: no-repeat;
	background-position: left center;
		
}

Code (markup):

 

^ you can also do that, but with a single image (which can be nice as the image gets loaded with the page, and fewer GET requests) which has both versions, then just change the background-position on :hover and :focus to show the side you want.

 

Yeah, I was going to say that - but that site is ancient and I didn't know about that when I made it but it was the first site of mine that came to mind this morning. This Paris Site is a better example, using only one image like this:

.paris_menu ul{
margin:0;
padding:0;
list-style: none;
}

.paris_menu li{
width: 165px;
line-height:12px;
height:12px;
margin:0 0 5px 10px;
padding:0;
list-style: none;
}
a.mainlevel {
padding:0 0 0 16px;
font-size: 9pt;
color: #000080;
font-family: Georgia, Serif;
font-weight: bold;
text-decoration: none;
background-image:url(../images/paris_buttons.jpg);
background-repeat: no-repeat;
}

a.mainlevel#active_menu {
color:#000080;
}
a.mainlevel:hover {
color:#C0C0C0
background-image:url(../images/paris_buttons.jpg);
background-repeat: no-repeat;
background-position: 0 -100px;
}

Code (markup):

The best thing about using a background image instead of bullet points is you can do pretty much what you want, even put the bullets on the other side like with this Las Vegas Site.