Javascript addEventListener - マウスオーバー効果を作成するために使用しますか？

Question

私は "ボタン"のIDを持つ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もこれらのイベントをサポートしていると思います。