How To - Make CSS :hover Pseudo-Class work in IE
As you may have discovered that currently IE does not support the pseudo-class :hover on non anchor element tag(s). However there is two solutions to this problem. The Suckerfish:hover or Whatever:hover. In my case I wanted to apply pseudo-class :hover onto multiple div element tags. I chose to use the Suckerfish:hover solution as it’s simple and very little code required to solve the problem. Whatever:hover has quite a bit of code and apparently has issues that might not make it work even in IE. I’m sure Whatever:hover has it’s place but in my mind either use JavaScript to solve the problem. I would prefer not to use JavaScript but what can you do :-). Here’s the Suckerfish:hover solution with my modifications (not much). I will not go much into this as the two source I have given are more then enough. I just wanted to show my modifications and to get more exposure to this problem.
CSS
I just add div.sfhover to my existing style.
div.float:hover, div.sfhover
{
background-color: #dde5f7;
}
JavaScript
I only modified this line var sfEls = document.getElementById(”nav”).getElementsByTagName(”LI”); to the following so it would be applied to an id called hover and to only div element tags enclosed in with in the hover id.
sfHover = function()
{
var sfEls = document.getElementById("hover").getElementsByTagName("div");
for (var i=0; i
sfEls[i].onmouseover=function()
{
this.className+=" sfhover";
}
sfEls[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Source: Suckerfish:hover
Source: Whatever:hover
