大佬教程收集整理的这篇文章主要介绍了如何通过悬停按钮来更改图像？更多详情如下，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
所以基本上我想通过在按钮上传递鼠标来更改图像。使用当前代码，我可以在单击按钮时更改图像，但是当我将鼠标放在按钮上而无需单击它时，我也需要更改图像。有什么想法吗？
<body>
<input type="button" class = "button" onclick="changeImage('https://www.gettyimages.es/gi-resources/images/500px/983794168.jpg')" value="button1" />
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixID=MXwxMjA3fdb8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80" class = "img" ID="firstimage" wIDth="310">
<input type="button" class = "button4" onclick="changeImage('https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixID=MXwxMjA3fdb8MHxzZWFyY2h8MXx8c3VucmlzZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80')" value="button2" />
和 JavaScript：
var image = document.getElementByID('firstimage');
function changeImage(uri) {
image.src = uri;
}
你可以试试这个，只要给你的 Button 一个 Id，就可以得到它。
var button = document.getElementById("buttonId")
var image = document.getElementById('firstimage')
button.onmouseover = function(uri){
image.src = uri
}
你的意思是这样吗？
像onclick一样，你可以使用onmouseover，它与css中的:hover相同
var image = document.getElementById('firstimage');
function changeImage(uri) {
image.src = uri;
}<input type="button" class = "button" onclick="changeImage('https://www.gettyimages.es/gi-resources/images/500px/983794168.jpg')"
onmouseover="changeImage('https://www.gettyimages.es/gi-resources/images/500px/983794168.jpg')"
value="button1" />
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80" class = "img" id="firstimage" width="310">
<input type="button" class = "button4" onclick="changeImage('https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8c3VucmlzZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80')"
onmouseover="changeImage('https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8c3VucmlzZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80')" value="button2" />
以上是大佬教程为你收集整理的如何通过悬停按钮来更改图像？更多详情如下全部内容，希望文章能够帮你解决如何通过悬停按钮来更改图像？更多详情如下所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。