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

然而，这只会在我悬停时将项目的颜色设置为蓝色，但不会在我将鼠标移开后将其重置为白色。我该如何纠正这个问题？ (顺便说一句， 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;")
}