CSS Examples 
Highlight Image onMouseover (border)
Author: CSS Drive
Using the CSS puesdo class "hover:", this example demonstrates applying a border to any image link when the mouse moves over it. The last definition (".highlightit:hover") is added to overcome a IE bug, which causes the effect to not work in that browser if not added.
The HTML:
<a href="http://www.cssdrive.com/" class="highlightit"><img border="0"
src="demo.gif"></a>
<a href="http://www.google.com/" class="highlightit"><img border="0"
src="demo2.gif"></a>
The CSS:
.highlightit img{
border: 1px solid #ccc;
}
.highlightit:hover img{
border: 1px solid navy;
}
.highlightit:hover{
color: red; /* Dummy definition to overcome IE bug */
}
Comments (10)
That what I was looking for :)
Is the ' border="0"' in the image tag necessary? I thought the setting it with CSS should be sufficient to override any default settings.
PS. To really fiz the IE Bug, you need to do this:
.highlightit:hover{
color: #333333;
border: 0px ;
}
------------------------------
cheers!
I still can't see the affect in IE. I will try it in other browser later. thanks anyway~
MANY thanks! I've been searching for this for the last three hours! FINALLY everything's working as it should be!
Oh, and I forgot to mention that, instead of putting the depricated "border=0" in the image tag, I just used "{border-width: 0px;} in the second :hover definition and it worked great.
Hi!
Great job TenTonJim, it works perfectly, itīs pleasure to see it!!
Thanks a lot!
Works great in opera :D
Thanks for the useful tips. The 'hover' css class is awesome and can be used for some really cool mouseover effects quickly and easily versus using other methods.
Golf Tips
Thanks Andrea. I see my comments were removed for some reason though. It was a handy cross browser solution. Too bad.
-
Jim S.
http://tentonweb.com/
