javascript使用悬停更改颜色

Question

嘿，当我将鼠标悬停在它上面时，尝试更改其颜色。 到目前为止，我无法正常工作，当我在控制台上看到“ ReferenceError：未定义悬停”时，“ out”也一样。 我该如何解决，这是唯一的问题吗？ 谢谢！

<html>
<head>
<title></title>

<script>
    var $Osc = {
hover: function(event){
    ("style", "background-color:blue;")
},
out: function(event){
    ("style", "background-color:white;")
}

}
var $Osc = document.getElementById("change");
hover.addEventListener("mouseover", $Osc.hover, false);
out.addEventListener("mouseout", $Osc.out, false);

     </script>


</head>
<body>
 <div id="change"onmouseover="hover(this)" onmouseout="out(this)">
     Hello
</div>
</body>
</html>

Answer 1

您没有定义hover和out 。 您需要通过以下方式更改代码：

var $OscElement = document.getElementById("change");
$OscElement.addEventListener("mouseover", $Osc.hover, false);
$OscElement.addEventListener("mouseout", $Osc.out, false);

您还将$0sc覆盖为当前元素，这会导致问题。 最后，要么在页面加载后执行整个脚本，要么将脚本放在元素之后。

您不需要元素上的onmouse事件，可以将其删除。

最后，设置CSS的方式是完全错误的。 您需要将event.target用于当前元素。

固定代码为：

 var $Osc = { hover: function(event) { event.target.style.backgroundColor = "blue"; }, out: function(event) { event.target.style.backgroundColor = "white"; } } var $OscElement = document.getElementById("change"); $OscElement.addEventListener("mouseover", $Osc.hover, false); $OscElement.addEventListener("mouseout", $Osc.out, false);

 <div id="change"> Hello </div>

最终，使用CSS可以很容易地完成整个工作，不确定为什么要JavaScript这样做：

 #change { background: white; } #change:hover { background: blue; }

 <div id="change"> Hello </div>

javascript使用悬停更改颜色

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-12-18 19:50:16

javascript使用悬停更改颜色

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-12-18 19:50:16

解决方案1
0 已采纳 2016-12-18 19:50:16