---

Note: this is based on the mootools versions v1.11.

HTMLDog wrote a great sfhover.js to deal with the pseudo class problems in ie6. As of the writing of this article, ie6 still has about 30% of the browser share (it is sad that ie7 had to be so much different that people won't switch...they could have just fixed what was wrong rather than COPY firefox :( .) Anyway, I digress; here is the sfhover.js by HTMLDog:


// JavaScript Document
//sfHover couresty of http://www.htmldog.com (http://www.htmldog.com/articles/suckerfish/dropdowns/)
sfHover = function() {
  if(document.getElementById("menu")){
    var sfEls = document.getElementById("menu").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
        this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp(" sfhoverb"), "");
      }
    }
  }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


Mootools can make this better most quickly, by using the mootool dollars $$('css selector here') to get an array of elements in much less code. Then using the addClass and removeClass element function and the array iterator, we can knock this out really quickly:


window.addEvent('load',function() {
  $$('#menu li').each(function(item) {
    item.addEvent('mouseover',function() { item.addClass('sfhover'); });
    item.addEvent('mouseout',function() { item.removeClass('sfhover'); });
  });
});


Thanks to HTMLDog and MooTools for showing us the way!

Last Updated: 2008-09-18 07:49:49