[thelist] javascript replacement for :hover?

Nick Daverin ndaverin at marian.org
Wed Jan 10 10:17:49 CST 2007

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.


More information about the thelist mailing list