IE6 :hover on non <a> elements via javascript Tutorial

Here is a working example.

Under normal circumstances, IE6 will only show a :hover effect on an <a> tag, otherwise known as an anchor tag. However, you can feed IE6 a little javascript to simulate a :hover effect for any element you want by using the small script below.

First: place this script in the <head> of your document.

<script type="text/javascript">
// suckerfish hover effect for ie6
sfHover = function() {
    // specify hovered element and div in which it sits 
    var sfEls = document.getElementById("content").getElementsByTagName("ul");
	for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" hover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" hover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

Second: within in the script itself specify the element you would like to show a hovered effect on, and the <div> in which the element sits.

var sfEls = document.getElementById("content").getElementsByTagName("ul");

Third: apply the class of .hover within your css along with your pseudo :hover rule like the example below. Note: only add the class of .hover to your CSS - not to your html - the javascript does that for us!

ul:hover, ul.hover {
	background: #999;
}

Or... IE6 :hover on MULTIPLE elements via javascript!

Here is a working example.

This is an awesome little script that Tim Pattison helped me out with. You can add an infinite amount of elements that you want to have a hovered effect on in IE6 by simply adding one more small line for each.

function sfHover(el) {
  var sfEls = document.getElementById("content").getElementsByTagName(el);
  for (var ii=0; ii<sfEls.length; ii++) {
    sfEls[ii].onmouseover=function() {
      this.className+=" hover";
    }
    sfEls[ii].onmouseout=function() {
      this.className=this.className.replace(new RegExp(" hover\\b"), "");
    }
  }
}
function sfStart() {
  sfHover("p");
  sfHover("h1");
  sfHover("ul");
}
if (window.attachEvent) window.attachEvent("onload", sfStart);

For each additional element you wish to have a hovered effect on, simply add this line as shone below. Edit element as desired, and then just follow the same steps as mentioned above.

sfHover("ul");

Or... IE6 :hover with CLASS NAMES via javascript!

This one is huge! As far as I know, it's the first of it's kind! That is, the power to show a hovered effect on anything in IE6 by simply giving the CSS a class name of "hover" and the html a class name of "ie6hover". This ability has been given before, but only in conjunction with huge JS libraries (like jQuery, Prototype, etc) - well no more! Myself and a few others built this recently (I helped a little) and I'm very excited to share it. Oh and by the way... look how small this puppy is - thats awesome! So with out further adieu - wala!

Here is a working example.

<script type="text/javascript">
document.getElementsByClassName=function(D){var F=new Array();var E=document.getElementsByTagName("*");for(var B=0;B<E.length;B++){if(E[B].className.indexOf(" ")>=0){var C=E[B].className.split(" ");for(var A=0;A<C.length;A++){if(C[A]==D){F.push(E[B])}}}else{if(E[B].className==D){F.push(E[B])}}}return F};function sfHover(){var B=document.getElementsByClassName("ie6hover");for(var A=0;A<B.length;A++){B[A].onmouseover=function(){this.className+=" hover"};B[A].onmouseout=function(){this.className=this.className.replace(new RegExp(" hover\\b"),"")}}}if(window.attachEvent){window.attachEvent("onload",sfHover)};
</script>

The CSS

#cool:hover, #cool.hover {
	background:#999;
}

The html

<div id="cool" class="ie6hover"></div>

Or... IE6 :hover with Whatever:hover is a good option also!

Lets not forget about Whatever:hover. This is also really easy to use as well. Unfortunately, he doesn't do the best job of explaining "how" to use it (you know, for us under 180 IQ people). For another project of mine, I recently sat down and read through it all (I never had the patients to do so before) and finally figured out how to use it. It's really simple! Just make a file called csshover.htc and copy/paste this code into it. Then just place body{behavior:url("csshover.htc");} in some IE Conditional Comments just like I have below (because "behavior" does not validate). Thats it - like I said - very easy!

<!--[if IE 6]>
<style type="text/css">
body{behavior:url("csshover.htc");}
</style>
<![endif]-->

ADVERTISE HERE