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;")
}