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

标签 javascript dom

我有一个 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 似乎不适用于此)。

最佳答案

您需要设置一个类似的事件来处理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;")
}

关于Javascript addEventListener - 用于创建鼠标悬停效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8318591/

相关文章:

java - 在 Java 中解析 XML 返回错误的子级数量

javascript - 使用 JavaScript 访问框架的文档对象

javascript - 如何从当前元素 jquery 找到最接近的 UL 标签

javascript - AJAX 呈现的表单不发送 RAILS 中的参数

javascript - 尝试使用 vue-awesome 图标但遇到麻烦

javascript - 获取 php 数组后将其转换为 javascript

javascript - 如何使用 Javascript 检测文本区域中的新空行?

javascript - 如何阅读代码中的函数描述?

css - 我可以定位相对于父元素固定的元素吗?

javascript - Div.scrollTop 过早滚动