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>

以上代码是我（正在进行中）网站的代码。我正在使用“图像”输入类型，因为它允许我将图像用作按钮。我在这里遇到麻烦的事情就是放入一些代码，这些代码允许我在鼠标悬停时放入另一张图像。此代码包含在PHP标记中，并设置为变量“$ form”。这是我可以回应它并轻松地运行其他一些PHP代码。

当我将鼠标悬停在按钮上时，是否有可用于放入另一张照片的CSS？我可能会比这看起来更复杂吗？

Answer 1

对于原生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;

Answer 2

看看这个>>fiddle<<
这是一个简短的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。< / p>

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

当使用输入类型＆＃34;图像＆＃34;时，我试图使其成为当我将鼠标悬停在它上面时，它会变为另一张图片

2 个答案: