如何解决javascript - 鼠标悬停在按钮上时更改图像源
Javascript 菜鸟在这里。我已经寻找了相关的问题,但所有的结果都不适合我,或者我并不真正理解其中的一部分。所以我可能只是在这里犯了一个愚蠢的错误。
我想要做的是一个脚本,当我将鼠标悬停在按钮上时,它会更改图像的来源。
HTML:
<button onmouSEOver="changeImg()" class="about" href="#">ABOUT</button>
<img class="image2" src="images/image2.png">
Javascript:
<script>
function changeImg()
{
var image = document.getElementsByClassName("image2");
image.src = "images/image1.png"
}
</script>
可能有更简单的方法吗?我更喜欢只使用 html css 和 javascript。 感谢您的帮助!
解决方法
您正在使用 getElementsByClassName
,它将返回具有该类的所有元素的数组。使用 document.getElementByClassName
或 document.querySelector(“element”)
function changeImg() {
var image = document.getElementByClassName("image2");
image.src = "images/image1.png"
}
另一种解决方案是使用带有 e
变量的事件侦听器:
document.querySelector(“.about”).addEventListener(“mouseover”,function (e) {
e.target.src = “newSource”
})
e.target
是图像元素
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。