[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