更改带有悬停的提交按钮图像

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，请查看此

Events/hover

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';"/>