Javascript addEventListener: ¿usar para crear un efecto de mouseover?

Question

Tengo un div con una identificación de "botón". Estoy intentando cambiar su fondo para que se vuelva azul cuando coloque el cursor (sin usar el selector de desplazamiento CSS).

var item = document.getElementById("button"); 
item.addEventListener("mouseover", func, false); 

function func() 
{ 
    var item = document.getElementById("button"); 
    item.setAttribute("style", "background-color:blue;") 
} 

Esto, sin embargo, sólo se establece el color del elemento a azul cuando se ciernen, pero no se reinicia a blanco después de mover el ratón de distancia. ¿Cómo puedo corregir esto? (por cierto, mouseenter y mouseleave no funcionan con esto aparentemente).

Answer 1

Tendrá que configurar un evento similar para manejar mouseout. Dentro de la función de evento mouseout, puede cambiar el color al color original.

var item = document.getElementById("button"); 
item.addEventListener("mouseover", func, false); 
item.addEventListener("mouseout", func1, false); 

function func() 
{ // not needed since item is already global, 
    // I am assuming this is here just because it's sample code? 
    // var item = document.getElementById("button"); 
    item.setAttribute("style", "background-color:blue;") 
} 

function func1() 
{ 
    item.setAttribute("style", "background-color:green;") 
} 

Answer 2

¿Has probado mouseout?

(Desafortunadamente, el evento "mouseover" recibió un nombre poco apropiado: hubiera sido mejor si se lo hubiera llamado "mousein", por lo que fue más obvio e intuitivo que "mouseout". Pero ese es solo uno de muchos cosas inconsistentes del evento.)

Creo que mouseenter y mouseleave son elementos de IE que otros navegadores pueden no admitir, aunque creo que jQuery también admite esos eventos.