Javascript addEventListener - si usa per creare un effetto mouseover?

Question

Ho un div con un id di "pulsante". Sto cercando di cambiare lo sfondo per diventare blu quando passo il mouse (senza usare il selettore hover CSS).

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

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

Questo, tuttavia, imposta solo il colore della voce di blu quando mi passa il mouse, ma non si resetta al bianco dopo mi muovo mouse. Come posso correggere questo? (btw, mouseenter e mouseleave non funzionano con questo apparentemente).

Answer 1

Sarà necessario impostare un evento simile per gestire mouseout. All'interno della funzione evento mouseout, puoi cambiare il colore al colore originale.

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

Hai provato mouseout?

(Sfortunatamente l'evento "mouseover" è stato chiamato male - sarebbe stato meglio se fosse stato chiamato "mousein" in modo che fosse più ovviamente e intuitivamente l'opposto di "mouseout". Ma questo è solo uno dei tanti eventi incoerenti.)

Penso che mouseenter e mouseleave siano cose che altri browser potrebbero non supportare, anche se penso che jQuery supporti anche quegli eventi.