Two columns Three columns Mixed cols and rows Gallery Archives Clean & Clear Dark or Black High Contrast/ Impact Blog Designs New Corporate/ Professional Unconventional Designs Liquid layouts Web Design Firms Our Favorites What's Popular Last 20 submissions
Horizontal Menus Vertical Menus Multiple/ Nested Levels

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 (9)

That what I was looking for :)

#1: blog on 05/21 at 01: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 10: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 03: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 04: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 06: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 06:46 PM

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

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

Works great in opera :D

#8: Werner on 11/17 at 10: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 05:54 AM

Post a Comment: Guest (Login or Register)

Name: (Required)

Email: (Required)

(NOT shown on page)

URL:

(Shown on page if entered)

Comments: (Required)

Remember my personal information
Notify me of follow-up comments?

Submit the word you see below:


CSS Forums

CSS Forums: latest threads Last Post Info
Cant design (1) 05/16/2008 12:28 pm
By: tarik
How to show an entire pdf in one div (2) 05/14/2008 11:07 am
By: Grundic
Starting A Web Design Business - How Do I Attract Customers? (10) 05/13/2008 02:37 pm
By: april
Download.. Pacific Wings multicolor menu (1) 05/13/2008 03:05 am
By: sebreh
Check out this website I am working on CRITIQUE. (5) 05/13/2008 01:20 am
By: abran