0 
<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 可以用来放入另一张图片？我可能会让这比看起来更复杂吗？

4

2 回答 2

2

对于本机 javascript，您可以onmouseover按照此示例使用：

http://jsfiddle.net/42E99/

为长的图片网址道歉，希望它不会混淆。

编辑

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

第二次编辑

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

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

background-color:transparent;
border: 0px solid;
于 2013-04-08T00:41:16.383 回答
1

看看这个>>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在我的示例中。

<input id="test" type='image' src='http://www.google.com/images/srpr/logo4w.png' name='loginbtn' value='Login' alt='Submit Form'/>
于 2013-04-08T00:21:29.573 回答