Bullet Time Again
Following in the footsteps of Bullet Time and CSS Image Rollovers, here's a new mini-tutorial showing how to create a bullet that changes colour when you rollover a link!
Take a look at the bulleted list below. Roll your mouse over the links and notice how the bullet changes colour (modern browsers only).
•
Bullet Item
• Bullet Item
• Bullet Item
• Bullet Item
This effect is easy to add to your webpages, without using images OR javascript! Simply use the HTML found below:
<a href="#"><span class="bullet">• </span>Bullet Item</a><br>
<a href="#"><span class="bullet">• </span>Bullet Item</a><br>
<a href="#"><span class="bullet">• </span>Bullet Item</a><br>
<a href="#"><span class="bullet">• </span>Bullet Item</a>
Then add these CSS classes (or something similar) to your document as well.
<style type="text/css">
<!--
a { text-decoration: none; color: #CC6600}
a:hover { text-decoration: none; color: #CC6500}
a .bullet { color: #FFCC66}
a:hover .bullet { color: #990000}
-->
</style>
Note: I'm still working on this browser quirk - you need to have some difference between your a and a:hover classes or the rollover for your bullets won't work. I've used color codes that are so close, most people won't notice the slight shift in colour for the rollover, and just notice the more obvious rollover on the bullet.