IE Fix: Simple CSS image mouse over
This is a follow up to my CSS image mouse over post.
So, the problem is that Internet Explorer ignores the pseudoclass :hover unless it’s applied to a link, i.e., img:hover won’t work (no pun intended 
).
Here’s how to make them all play nice.
This is what we came up with last time:
HTML:
<a href="target.html" class="highlight"><img src="yourimage.png"></a>
CSS:
.highlight img{
border:0;
}
.highlight img:hover{
background-color:#ff6c00;
}
Now, we were on the right track, so this isn’t all throw away, we just need to make a few adjustments.
First of all, as I said above, IE doesn’t like it when :hover is applied to anything other than a link, so let’s break down and give it what it wants. Tell your .highlight class that it’s to deal with a link and not an image. While you’re at it, you can delete the border:0; as it will no longer do us any good here. It should read as follows:
a.highlight {
}
a:hover.highlight {
background-color:#ff6c00;
}
Now, we just have to deal with the fact that there is a big ugly border on our image. Add a new class called .noborder and put the border:0; in there.
.noborder {
border:0;
}
Go ahead and apply that class to the image in your HTML.
<a href="target.html" class="highlight"><img src="yourimage.png" class="noborder"></a>
And that’s that! We’ve managed to trick IE into doing what FireFox had been doing for us all along. There’s just one problem… refresh document in a FireFox browser… no dice; it’s broken.
So we had it working in FireFox but not IE, now we force it to work in IE and it breaks FireFox… are we doomed to crawling back to javascript to get us out of this one?
Actually, no. This is an easy fix! Were you wondering why I kept that empty a.highlight class?
Add the following to your a.highlight class (I used 100×100 because that’s the size of my image, replace those values with your own dimensions):
height:100px; width:100px; display:block;
Voila! You now have a nice image mouse over effect that it completely cross-browser compatible using only one image and without resorting to javascript.
Your final code should look like this:
HTML:
<a href="target.html" class="highlight"><img src="yourimage.png" class="noborder"></a>
CSS:
a.highlight {
width:100px;
height:100px;
display:block;
}
a:hover.highlight {
background-color:#ff6c00;
}
.noborder {
border:0;
}
Here it is in action.
I hope that this proves to be useful, have fun!
Hi, cool post. I have been wondering about this topic,so thanks for writing.