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 11:21 AM

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 08:09 AM

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 01: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 02: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 04: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 04:46 PM

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

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

Works great in opera :D

#8: Werner on 11/17 at 08:30 AM

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 03: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 05/31 at 07:36 PM

Reseller Hosting

NewsUser
Privileges

Partners & ResourcesOur
Partners

CSS Forums News

Dynamic Drive forums | Register

All images and content copyright © 2004-2012 CSS Drive. Contact Info | Back to Top