Home

CSS Examples Highlight Image onMouseover (border)

Date: 09/17/2004 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 :)

#1: blog on 05/21 at 05:21 PM

Is the ' border="0"' in the image tag necessary? I thought the setting it with CSS should be sufficient to override any default settings.

#2: steve on 09/02 at 02:09 PM

PS. To really fiz the IE Bug, you need to do this:

.highlightit:hover{
color: #333333;
border: 0px ;
}


------------------------------

cheers!

#3: alex on 11/25 at 08:14 AM

I still can't see the affect in IE. I will try it in other browser later. thanks anyway~

#4: nicole on 01/06 at 09:19 AM

MANY thanks! I've been searching for this for the last three hours! FINALLY everything's working as it should be!

#5: mistique on 03/26 at 11:43 PM

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.

#6: mistique on 03/26 at 11:46 PM

Hi!
Great job TenTonJim, it works perfectly, itīs pleasure to see it!!
Thanks a lot!

#7: Andrea on 10/15 at 06:17 AM

Works great in opera :D

#8: Werner on 11/17 at 03:30 PM

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

#9: Kenneth L. on 01/15 at 10:54 AM

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/

#10: Jacksonville Web Design on 06/01 at 01:36 AM
Commenting is not available in this weblog entry.


Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site