gpt4 book ai didi

javascript 使用悬停来改变颜色

转载 作者:行者123 更新时间:2023-11-28 05:13:07 25 4
gpt4 key购买 nike

嘿,当我将鼠标悬停在“Hello”上时,我试图改变它的颜色。到目前为止,我无法让它工作,当我查看控制台时,我得到“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>

最佳答案

没有任何地方定义了 hoverout。您需要这样更改代码:

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 使用悬停来改变颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41212143/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com