CSS :hover for any element in Internet Explorer

Guido van Loon

Friday, February 23. 2007

CSS :hover for any element in Internet Explorer

Yes that's right! The :hover style normally only works with <a> tags in IE while it should work for any other element as well. Other browsers like FireFox did a better job supporting this but since the majority is using IE we're stuck with a broken :hover implementation.

There is a cure however. A pretty smart piece of javascript by Peter Nederlof fixes this particular problem very elegant. He created a behavior for IE which can read your stylesheets and attach onmouseover and onmouseout events to the HTML elements that needs them to enable the :hover effect.

To enable the :hover style for almost any element in IE, all you would have to do is to attach the behaviour the the body element in your stylesheet like this:

body
{
     behavior: url(javascript/csshover.htc);
}
 

For a full explanation and the behavior code turn to Peter Nederlof's site: Whatever:hover

This is a real Gem!

Posted by Guido van Loon in Web design Comment: (1) Trackbacks: (0)
Defined tags for this entry:
Related entries by tags:
Put a Stop to Table Based Layout!

Trackbacks
Trackback specific URI for this entry

No Trackbacks

Comments
Display comments as (Linear | Threaded)

#1 - Ramon said:
2007-04-06 15:04 - (Reply)

I use this script to on the volleybal website that I created august 2006. http://www.vv-yum.nl/ I don't know if it is still required for IE7.


Add Comment

Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA