[thelist] javascript replacement for :hover?

Austin Harris austin at dotmail.co.uk
Wed Jan 10 10:24:48 CST 2007

How bizarre, I have just been doing exactly this... You can do it in pure css, but it doesn't work in IE6, (not sure about IE7 - some bright spark won't allow it here - great for us developers!)

Anyway I used this and it worked nicely, unless anyone has any objections???


Nice and simple to implement and you still get a standard submit button when javascript is turned off.


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.



* * Please support the community that supports you.  * *

For unsubscribe and other options, including the Tip Harvester 
and archives of thelist go to: http://lists.evolt.org 
Workers of the Web, evolt ! 

More information about the thelist mailing list