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？

（不幸的是，事件“鼠标悬停”命名不佳 - 如果它被称为“mousein”会更好，因此它更明显和直观地与“mouseout”相反。但这只是众多不一致之一事情。）

我认为mouseenter和mouseleave是其他浏览器可能不支持的IE东西 - 尽管我认为jQuery也支持这些事件。

Javascript addEventListener - 用于创建鼠标悬停效果？

2 个答案: