如何在JavaScript中编写hoverHandler来在悬停时改变元素的颜色？

Question

function hoverHandler(e)
{
if(event.target.getAttribute("id") != "hovering")
{
    event.target.setAttribute("id", "hovering");
}
}

这是我的代码，我还有一个 CSS，可以在 id 悬停时设置颜色。

问题： 1）当我悬停时，当我离开元素时，颜色不会重置回以前的颜色

Answer 1

难道直接用CSS就可以解决问题吗？

一样

.element:hover
{
 background-color: #FF0000;
}

就像元素是类名

Answer 2

尝试添加，并确保您也检查了 onmouseout

 <script>
 function hoverHandler(e)
  {
 if(e.id=="red")    // hovering
 {
 e.id="blue"; 
 }else {
e.id="red"; 
 }
 }
 </script>
<span onmouseover="hoverHandler(this)" onmouseout="hoverHandler(this)">test</span>

，或者内联事件处理程序可能会将

<style>#startStyle {color:lime} #red {color:red}#blue{color:blue}</style>


 <span onmouseover="this.id='red'" onmouseout="this.id=''">test</span>

onmouseout 默认返回基本样式（如果有）；或者

 <span onmouseover="this.id='red'" onmouseout="this.id='startStyle'">test</span>