html - 当使用输入类型 "image"时，我试图做到这一点，以便当我将鼠标悬停在它上面时，它会更改为另一张图片

Question

<form action='./index.php' method='post' class='form'>
<table>
<tr>
<td>$error</td>
</tr>
<tr>
<td>Username:</td>
<td><input type='text' name='user' /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type='password' name='password' /></td>
</tr>
<tr>
<td></td>
<td><input type='image' src='./images/loginbtn.jpg' name='loginbtn' value='Login' alt='Submit Form'/></td>
</tr>
</table>
</form>

以上代码来 self 的(进行中的)网站。我正在使用“图像”输入类型，因为它允许我将图像用作按钮。我在这里遇到的问题是输入一些代码，当我将鼠标悬停在它上面时，它允许我放入另一个图像。此代码包含在 PHP 标记中并设置为变量“$form”。这样我就可以回显它并使用它轻松运行一些其他 PHP 代码。

当我将鼠标悬停在按钮上时，是否有任何 CSS 可以用来放入另一张图片？我是否可能使这比看起来更复杂？

Answer 1

对于 native javascript，您可以使用 onmouseover按照这个例子:

http://jsfiddle.net/42E99/

对于长图片网址表示歉意，希望它不会混淆。

编辑

CSS: http://jsfiddle.net/dZ2qL/使用 hover更改背景图片。

第二次编辑

http://jsfiddle.net/dZ2qL/3/

使用 <div>而不是 <input>并且还在 css 中添加了一些行。

background-color:transparent;
border: 0px solid;