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

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

4 个答案: