JavaScript addEventListener - za pomocą, aby utworzyć efekt mouseover?

Question

Mam element div z identyfikatorem "przycisku". Próbuję zmienić jego tło, aby stał się niebieski po najechaniu kursorem (bez użycia selektora 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;") 
} 

To jednak tylko ustawia kolor elementu na niebiesko, gdy unoszą się, ale nie przywrócić go do białego po poruszam myszką z dala. Jak mogę to poprawić? (btw, mouseenter i mouseleave nie działają z tym pozornie).

Answer 1

Musisz konfiguracji podobną imprezę obsługiwać mouseout. Wewnątrz funkcji zdarzenia mouseout możesz zmienić kolor z powrotem na kolor oryginalny.

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

Czy próbowałeś już mouseout?

(Niestety zdarzenie "mouseover" zostało źle nazwane - byłoby lepiej, gdyby zostało nazwane "mousein", więc było to bardziej oczywiste i intuicyjne przeciwieństwo "mouseout" .Ale to tylko jeden z wielu . niespójne rzeczy event)

myślę mouseenter i mouseLeave IE są rzeczy, które inne przeglądarki nie obsługują - choć myślę jQuery obsługuje te zdarzenia też.