Javascript addEventListener - 마우스 오버 효과를 만드는 데 사용 하시겠습니까?

Question

id가 "button"인 div가 있습니다. (CSS 호버 선택기를 사용하지 않고) 마우스를 가져 가면 배경이 파란색이되도록 변경하려고합니다.

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

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

그러나 이것은 단지 내가 마우스를 가져 가면 파란색으로 항목의 색상을 설정,하지만 멀리 마우스를 이동 한 후 흰색으로 재설정하지 않습니다. 이 문제를 어떻게 해결할 수 있습니까? (btw, mouseenter 및 mouseleave는 이것과 함께 작동하지 않습니다.)

Answer 1

mouseout을 처리하려면 비슷한 이벤트를 설정해야합니다. mouseout 이벤트 함수 내에서 색상을 원래 색상으로 되돌릴 수 있습니다.

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

mouseout을 사용해 보셨습니까?

(불행히도 "mouseover"라는 이벤트의 이름이 잘못 지정되었습니다. "mouseinin"이라는 이벤트가 더 분명하고 직관적으로 "mouseout"과 반대되는 경우 더 좋았을 것입니다. 일관성없는 이벤트 일들.)

나는 mouseenter와 mouseleave가 다른 브라우저가 지원하지 않는 IE의 것들이라고 생각한다. jQuery가 이러한 이벤트도 지원한다고 생각하지만.