This piece of code was asked for over at Weborum, it adds a pretty good effect to any bullet images (lists) you may already have on your site and is very easy to do.
Firstly let's create our HTML code for the list:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>CSS rollover Bullet List Example</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<ul id="rollover">
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
</ul>
</body>
</html> |
Here we have our list with the ID rollover. This is so we can set our CSS for this list only (and not every list that appears on your site). Next is our CSS code:
<style type="text/css">
#rollover ul, #rollover li {
list-style-type: none;
line-height: 20px;
}
#rollover li a {
background-image: url(arrow.gif);
background-repeat: no-repeat; background-position: 0 .4em;
padding-left: 15px;
}
#rollover li a:hover {
background-image: url(orange_arrow.gif);
background-repeat: no-repeat; background-position: 0 .4em;
padding-left: 15px;
}
</style> |
As you can see the main differences between this code and the code I used in my Advanced Lists Tutorial is that the li tags now have an extra attribute added to them: #rollover li a (for the links) and #rollover li a:hover (for the links on hover). As the links appear on the page they have the image arrow.gif but when you hover over them they have the orange_arrow.gif appear ... quite a nifty trick isn't it?
To see this code in working action here is one I prepared earlier: Rollover Bullet List Example.