Comments on: Adding additional behaviour to IE - LI Hover/Rollover http://www.melbournechapter.net/wordpress/programming-languages/cman/2006/03/27/adding-additional-behaviour-to-ie-li-hover/ web application development with popular technologies Tue, 02 Dec 2008 07:07:46 +0000 http://wordpress.org/?v=2.0.5 by: Richard Lee http://www.melbournechapter.net/wordpress/programming-languages/cman/2006/03/27/adding-additional-behaviour-to-ie-li-hover/#comment-30 Mon, 27 Mar 2006 06:35:20 +0000 http://www.melbournechapter.net/wordpress/programming-languages/cman/2006/03/27/adding-additional-behaviour-to-ie-li-hover/#comment-30 htc is a great, but please note it is by no means standards compliant. A simple alternative is to use javascript to filter through the list and apply mouseover and mouseout events to the individual list items. Obviously this will require a javascript enabled browser. Below is an example of such a javascript used in <a title="Take me to the Suckerfish Menu!" href="http://www.htmldog.com/articles/suckerfish/dropdowns/">Dan Webb and Patrick Griffith's Suckerfish menu</a>. sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 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); NB: Although IE has troubles with the hover behaviour most modern browsers such as Mozilla, Opera and Safari support :hover, :active and :focus on lists - as the standards intended. htc is a great, but please note it is by no means standards compliant. A simple alternative is to use javascript to filter through the list and apply mouseover and mouseout events to the individual list items. Obviously this will require a javascript enabled browser. Below is an example of such a javascript used in Dan Webb and Patrick Griffith’s Suckerfish menu.

sfHover = function() {
var sfEls = document.getElementById(”nav”).getElementsByTagName(”LI”);
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);

NB: Although IE has troubles with the hover behaviour most modern browsers such as Mozilla, Opera and Safari support :hover, :active and :focus on lists - as the standards intended.

]]>