如何通过悬停按钮来更改图像？更多细节如下

Question

所以基本上我想通过将鼠标移到按钮上来更改图像。使用当前代码，我可以在单击按钮时更改图像，但是当我将鼠标放在按钮上而无需单击它时，我也需要更改它。有什么想法吗？

<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;
}

Answer 1

你可以试试这个，只要给你的按钮一个ID，之后就可以得到它。

var button = document.getElementById("buttonId")
var image = document.getElementById('firstimage')


button.onmouseover = function(uri){
    image.src = uri
}

Answer 2

你是这个意思吗？
像 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" />

如何通过悬停按钮来更改图像？更多细节如下

how can I change an image by hovering a button? More details below

html

javascript

hover