Question

我试图找出当光标悬停在其上时如何使我的提交按钮图像更改为另一个图像。到目前为止，这是我的代码：

<!DOCTYPE>
<html>

<body>

<form>
<font face="Arial">Please type your name below and click submit.</font>
<br />
<input type="text">
<p>
<input type="image" src="..\Pictures\submit_button_img.jpg" alt="submit" >
</p>
</form>

</body>

</html>

此代码有效，我只是不知道当光标悬停在图像上时如何切换图像。有什么建议？我希望它能用CSS或JavaScript。

Answer 1

使用

<input type="submit" class="somename">

并添加class名称，将图片设置为background-image，然后使用CSS :hover更改该图片。不需要Javascript

  input[type=submit]{
    width: 100px;
    height: 20px;
    background-image: url("someimage.jpg");
    background-repeat: no-repeat;
    border: none;
    text-indent: -9999px;
  }

  input[type=submit]:hover{
    background-image: url("someimage2.jpg");
 }

您可以定位提交按钮，也可以添加类名。您还可以使用精灵并在悬停时更改background-position，而不是交换图像文件

简单示例：JSFIDDLE

Answer 2

理想情况下，您应该使用精灵。在加载第二张图像之前，这是一种很好的方法，可以在没有“空虚闪现”的情况下进行翻转。

首先，创建你的精灵。它应该是一个看起来像这样的图像：

+---------------+
| Normal button |
+---------------+
+---------------+
| Hover  button |
+---------------+

请注意，两个“部件”的尺寸应相同，这将是按钮的大小。保存此项，例如btn_sheet.png

现在您需要准备输入：

<input type="image" class="btnimage" />

现在，对于让它全部工作的CSS：

.btnimage {
    width: 100px; /* replace with actual width your button */
    height: 50px; /* replace with actual height of the button */
    background:url('/btn_sheet.png'); /* adjust path as needed */
}
.btnimage:hover {
    background-position: 0 -50px;
    /* replace the 50px with the actual height of the button */
}

完成了！

当鼠标悬停在它上面时，我需要帮助将提交按钮图像更改为另一个图像

2 个答案: