Anne van Kesteren

selector:hover in Internet Explorer!

Since people like to play with technology, they are going to hate software that doesn't support it (unless your name is Jeffrey Zeldman). Everyone wants to use :hover on every element, since it is made possible and supported by the more advanced and continuously developed browsers. You would want it for form elements or a nice Suckerfish Dropdown menu!

Thanks to Peter Nederlof, a fellow Dutchman who has recently been made this possible in Internet Explorer. He did a far better job, then the best I ever achieved: p:hover in Internet Explorer. I put up a example page: selector:hover in Internet Explorer (it doesn't have any nice styling). Related:

Comments

  1. http://blue.ripcord.co.nz/~ben/css3/.

    Like minds think alike and all that eh?

    Posted by Ben Nolan at

  2. NOTE: I didn't write the script.

    Yours looks less complicated and supports more :-). What a day!

    Posted by Anne at

  3. That's a nice one too. Technically it does pretty much the same thing, only shorter. I Didn't know it was possible to run script inside css like that :-)

    I don't know if this is the best place to discuss this, but it does have a few quirks I'd like to see changed or fixed. The most important ones being that it does not seem to work with node.class:hover, and that it attaches both hover and focus events on any element matching the tagname the :hover or the :focus are assigned to, not only those elements actually selected by the rule.

    Also, The :focus selector is returned as "unknown" by IE. In your script you attach the focus events based on "unknown" rather than "focus" (because that is impossible). This is probably a safe enough assumption, but because of this :fiets would result in a focus event too.

    Last but not least :-) The script hijacks the events it needs, possibly conflicting with other scripts that might need those events too. Still an impressive script though. It, too, demonstrates that IE's flaws can be fixed with relative ease :-)

    Posted by Peter at

  4. Personally, I like Peter's idea of using behaviors, rather than DOM events.

    In fact, I like it so much, I'm using it on my site.

    Posted by Jacques Distler at

  5. I have created a :hover emulation script too.

    You should manually add additional rules for the tags where you want the hover effect to work but it doesnt have to wait until the page loads and the init script runs.

    It supports tag.className:hover rules too.

    You can see it here: www.hszk.bme.hu/~hj130/css/list_menu/hover/index.html.

    Posted by Janos Horvath at

  6. Mmm, you seem to be able to add a hover to a form button. I'm trying too (image hover using pixy's preloaded rollover), it only works if I call the .htc file from html itself. If I add the behavior line in .css file itself (both .htc and .css in same directory), it doesn't work ?

    Posted by Luuc at