javascript - 使用悬停更改提交按钮图像

Question

我使用 Post 方法在 html 表单中有以下内容。

<input type="submit" title="" class="myclass" value="" />

和：

.myclass {
background: url(../images/image1.png)  no-repeat; border: none;
width: 165px;
height: 59px;
}

基本上，我需要使用 image1.png 按钮发布我的表单信息，当悬停时，会调用 image2.png。你会推荐 CSS 或 javascript，具体的方法是什么？

谢谢大家，已回复！

Answer 1

提交按钮：

<input type="image" title="" class="myclass" src="../images/image1.png" />  

CSS：

.myclass:hover {
background: url(../images/image2.png)  no-repeat; border: none;
width: 165px;
height: 59px;
}

Answer 2

如果你可以使用 jquery，看看这个

事件/悬停

Answer 3

不知道为什么，但是第二个答案对我不起作用，所以我不得不这样做：

<input type="image" class="myclass" src="../images/image1.png" />

CSS：

.myclass, .myclass:hover {
width: 165px;
height: 59px;
}
.myclass {
background: url(../images/image1.png);
}
.myclass:hover {
background: url(../images/image2.png);
}

Answer 4

CSS 方法对我不起作用，但这个方法对我有用（vanilla JS）：

<input type="image" src="../images/image1.png" onmouseover="this.src='../images/image2.png';" onmouseout="this.src='../images/image1.png';"/>