Question

This script works fine in all other browsers except IE:

nav.addEventListener('mouseover',function(e) {
        switch(e.target.id) {
            case 'aGallery':
            navOpacity.style.backgroundColor = "red";
            break;
            case 'aContact':
            navOpacity.style.backgroundColor = "green";
            break;
            case 'aAbout':
            navOpacity.style.backgroundColor = "yellow";
            break;
            case 'aHome':
            navOpacity.style.backgroundColor = "#CC33CC";
            break;
        }
    },false);

In IE, the backgroundcolor does not change on hover.

Any ideas?

Answer 1

In IE you have to use attachEvent rather than the standard addEventListener. And use srcElement instead of target for IE.

Try this.

function mouseOverHandler(e) {
        switch((e.target || e.srcElement).id) {
            case 'aGallery':
            navOpacity.style.backgroundColor = "red";
            break;
            case 'aContact':
            navOpacity.style.backgroundColor = "green";
            break;
            case 'aAbout':
            navOpacity.style.backgroundColor = "yellow";
            break;
            case 'aHome':
            navOpacity.style.backgroundColor = "#CC33CC";
            break;
        }
}

if (el.addEventListener){
  el.addEventListener('mouseover', mouseOverHandler, false); 
} 
else if (el.attachEvent){
  el.attachEvent('onmouseover', mouseOverHandler);
}