[thelist] javascript replacement for :hover?

Nick Daverin ndaverin at marian.org
Wed Jan 10 10:21:08 CST 2007



Nick Daverin wrote:
> Barney Carroll wrote:
>   
>> Hi guys, wondering if anyone can help me with a javascript problem.
>>
>> I want to create hover effects on non-link elements (input 
>> type="button") for IE6 - which it can't do based on css alone. What I'm 
>> thinking is getting 1 onMouseover and 1 onMouseout function, which both 
>> modify the CSS style to what the existing CSS has written down as :hover.
>>
>> Any tips?
>>
>> Regards,
>> Barney
>>   
>>     
>
> Hi Barney, you could use the javascript that 'Son of Suckerfish 
> Dropdowns' (http://www.htmldog.com/articles/suckerfish/dropdowns/) uses:
>
> sfHover = function() {
>     var sfEls = document.getElementById("nav").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(" 
> sfhover\\b"), "");
>         }
>     }
> }
> if (window.attachEvent) window.attachEvent("onload", sfHover);
>
> Which, when called, adds an afhover class to the element.
> Then all you need to do is make .sfhover the same as your :hover class.
>
> -Nick

Whoops, this will add it to <ul>'s nested in a <ul> with an ID of 
'nav'... I forgot to modify it, but it shows the basic principle.
-Nick




More information about the thelist mailing list