Why doesn’t :hover work in IE?

You may have seen on other sites an effect whereby the background colour of a containing element changes colour when you hover over it. A look at their CSS might reveal something like div:hover or li:hover. This is also how a lot of CSS dropdown menus work too, by applying a :hover to a list item.

This all works fine in most browsers except IE which only supports :hover on pseudo classes, i.e. anchors (links). All other elements won’t natively support :hover in IE.

So how do they get it to work then? Answer: javascript. You can either write a specific script to add :hover behaviour to a particular element or you can use an .htc file like Peter Nederlof’s CSS hover which attaches :hover behaviours to any element.

Update

As announced on the IEBlog, :hover will be enabled on all elements in IE7.

Share this post
  • Twitter
  • Facebook
  • LinkedIn
  • Posterous
  • Reddit

Browse by tags:

Tags: , , , ,

Subscribe to this site for regular updates