Applying border onMouseover to images

First up, the CSS technique for applying a border to image links onMouseover:

<header>
<style type="text/css">
.borderit img{
border: 1px solid #ccc;
}
.borderit:hover img{
border: 1px solid navy;
}
.borderit:hover{
color: red; /* irrelevant definition to overcome IE bug */
}
</style>
</header>



By using the CSS pseudo class ":hover", we apply the enclosed CSS definitions to only when the mouse moves over any 
image with class="borderit". The last definition (".borderit:hover") is irrelevant, and only used to overcome a IE bug whereby if not 
present would disable the border effect in IE.
<body>
<a href="#" class="borderit"><img border="0" src="email.gif" /></a>
</body>

Close