11

The CSS :hover doesn't work in IE6 for elements that are not links. Is there a workaround? e.g. how do I apply the :hover to a div?

1

4 Answers 4

9

There's whatever:hover. I've never used it myself but from what I hear, it works well.

Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser. Version 3 introduces ajax support, meaning that any html that gets inserted into the document via javascript will also trigger :hover, :active and :focus styles in IE.

3
  • isn't there a css alternative for that?
    – Sarfraz
    Apr 3, 2010 at 11:23
  • 4
    @Sarfraz as far as I know, no, otherwise whatever:hover and other workarounds wouldn't exist.
    – Pekka
    Apr 3, 2010 at 11:24
  • 1
    +1, my thoughts as soon as I'd read the title. whatever:hover traverses the stylesheets converting pseudo classes to class names and attaching the required event handlers.
    – Andy E
    Apr 3, 2010 at 11:35
5

You can use the famous IE7.js from Dean Edwards, which has the nice advantage, that you can use the :hover selector in your CSS.

Apart from that, I doubt that you can achieve it with CSS alone. IE can handle JS in CSS files via expression(), but you can't get to an expression to handle hovering without a selector handling hovering, if you catch my drift.

Then, finally, a short jQuery solution:

$(document).ready(function () {
  $('div').hover(function () {
    $(this).addClass('hover');
  }, function () {
    $(this).removeClass('hover');
  });
});

Then you can use this in your stylesheet:

div:hover, div.hover { ... }
2
  • 1
    +1 for this one too. Overkill for :hover support alone, but great if you wanted all the extra stuff and just didn't know it yet.
    – Andy E
    Apr 3, 2010 at 11:47
  • @Andy E: True, that it is overkill for :hover alone. Actually, mostly when an answer starts with 'You can use jQuery or this...' this is exactly what I comment then. ;-) However, like you mention, dealing with IE6 I often find myself thinking of IE7.js in a bunch of different situations.
    – Boldewyn
    Apr 3, 2010 at 17:25
3
  • If you only need for paticulars div and you are not using jquery then go for suckerfis js as @futta suggested.http://www.htmldog.com/articles/suckerfish/
  • If you are planning to use Hover on more tags in future and don't want to edit every time js for this the go for Whatever.htc in for IE6. as @Pekka suggested.
Suckerfish vs. .htc

IIIIN the blue corner we have Suckerfish, the original lightweight, accessible, cross-browser, standards-compliant :hover mimic. IIIIN the red corner we have '.htc' - the JavaScript files accessed via CSS to mimic :hover.

Ding ding!

And Suckerfish instantly lands a heavy blow on .htc's validity - .htc simply isn't standards compliant CSS.

Oooo... .htc sneaks in a crafty jab without the need for additional selectors...

Suckerfish bounces around the ring. He's much lighter weight than his opponent.

And OH! The IE 5.0 uppercut! That's something that .htc just doesn't have the skill to do, whereas Suckerfish can work IE 5.0 seamlessly.

.htc is dazed! And the contest is over! Suckerfish wins on points! TKO!

NO pure and valid CSS solution available for this in IE6.

1
  • For my requirement, suckerfish solution should suffice.
    – Sarfraz
    Apr 3, 2010 at 14:55
2

suckerfish and it's offspring provde great lightweight alternatives for this purpose too.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.