使用悬停更改提交按钮图像答案

【问题标题】：Change Submit button image with hover使用悬停更改提交按钮图像
【发布时间】：2010-12-27 13:11:04
【问题描述】：

我在使用 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，具体的方法是什么？

谢谢大家，已回复！

【问题讨论】：

有帮助，是的，我想我可以试一试，虽然我现在还不熟悉！

标签： javascript css hover mouseover

【解决方案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;
}

【讨论】：

这是我的第一次尝试，但是当类作为提交按钮被调用时，它似乎不起作用。还是我错了？

【解决方案2】：

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

Events/hover

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案4】：

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

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

【讨论】：