A few nights ago I spent an embarassingly long time working out this little script just b.c. of that damn ie6. I had thought to do it with sibling selectors. Interesting idea but there didn’t seem to be any good, clear javascript snippets for mimicking css sibling selector behavior.
Anyways, this is the script. It works with a variation on a CSS menu so that onmouseover of the li whose parent ul is “select”, it grabs the parent’s parent, picks the parent’s kid (aka the sibling of “select”) that is named “current” and changes the class name.
Just today, I found this which points out the behavior whatever:hover (somewhat like the png fix). I remember hearing about whatever:hover but forgot of course and I think it’s a very good thing to not forget. If not for ie6 and the need to not have the current tab itself disappear when it is hovered over it could’ve been this simple:
#nav:hover ul.current a,
#nav:hover ul.current a span {background:none;}
Instead I’ve got all this junk in my header:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
function menuhover_currentoff() {
var list = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<list.length; i++) {
list[i].onmouseover=function() {
if (this.parentNode.className==”select”){
var list_uncles = document.getElementById(”nav”).getElementsByTagName(”UL”);
for (var j=0; j<list_uncles.length; j++){
if(list_uncles[j].className==”current”){
list_uncles[j].className=list_uncles[j].className.replace(”current”, “current_over”);
}
}
}
}
list[i].onmouseout=function() {
var list_uncles = document.getElementById(”nav”).getElementsByTagName(”UL”);
for (var j=0; j<list_uncles.length; j++){
if(list_uncles[j].className==”current_over”){
list_uncles[j].className=list_uncles[j].className.replace(”current_over”, “current”);
}
}
}
}
}
window.onload = menuhover_currentoff;
//–><!]]>
</script>