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 */
}
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
Annoucement: I'm looking for a few news posters. Interested?
| CSS Forums: latest threads | Last Post Info |
|---|---|
| Cant design (1) | 05/16/2008 12:28 pm |
| How to show an entire pdf in one div (2) | 05/14/2008 11:07 am |
| Starting A Web Design Business - How Do I Attract Customers? (10) | 05/13/2008 02:37 pm |
| Download.. Pacific Wings multicolor menu (1) | 05/13/2008 03:05 am |
| Check out this website I am working on CRITIQUE. (5) | 05/13/2008 01:20 am |