使用输入类型"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>

上面的代码是代码从我的(工作在进行中)网站。我使用"image"输入类型，因为它允许我使用图像作为按钮。我在这里遇到的问题是，放一些代码让我可以放另一个图像当我把鼠标放在它上面的时候。这段代码包含在PHP标签中，并设置为变量"$form"。这样我就可以回显它并轻松地运行其他PHP代码。

是否有任何CSS，我可以使用在另一个图片，当我的鼠标在按钮上?我是不是把事情弄得比看起来更复杂了?

Answer 1

对于原生javascript，您可以按照以下示例使用onmouseover:

http://jsfiddle.net/42E99/

很抱歉用了这么长的图片url，希望没有混淆。

编辑

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

2日编辑

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

使用<div>代替<input>，并在css中添加一些行

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

Answer 2

看看这个>> fiddler <<
下面是一个简短的jquery代码演示:

首先你需要包含jquery

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

则包含以下代码:

<script>
    $(document).ready(function() {
        $("#test").hover(
          function () {
            $(this).attr('src','http://www.seobook.com/images/smallfish.jpg');
          },
          function () {
            $(this).attr('src','http://www.google.com/images/srpr/logo4w.png');
          }
        );
    });
</script>

和在你的html中，你设置id或class到你的元素(它必须与示例脚本中的一个相同，值是test在我的例子中。

<input id="test" type='image' src='http://www.google.com/images/srpr/logo4w.png' name='loginbtn' value='Login' alt='Submit Form'/>