更改鼠标悬停时的提交按钮图片

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，并且应该如何确切地实现它？

谢谢大家，问题已经解决！

- skarama

---

有帮助的话，我想我可以尝试一下，虽然目前我对它不太熟悉！ - skarama

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

- Sarfraz

---

那是我的第一次尝试，但当类被调用为提交按钮时似乎无法工作。或者我错了吗？ - skarama

Answer 2

如果您会使用jQuery，请看这个：

Events/hover

。

- Adriaan Stander

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

- Kenert

Answer 4

对我来说，CSS 方法并没有起作用，但是这个（vanilla JS）确实行得通：

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

- tsuma534