Question

我有以下表格：

<form  action="login_form.php"   method="POST"   id="login_form">  
  Email  <input name="email" type="text" size="25" placeholder="type your email"/>
  Password  <input name="password" type="text" size="25" placeholder="type your password" /> 
  <input type="submit" value="" name="submit" style="background:url('img/button-go.png') no-repeat;  width:68px;  height:27px;  border:none;  cursor:pointer;    "/>     
</form>

正如您所看到的，我在表单中使用了一个名为button-go.png的图像作为按钮。我有另一个名为button-go_light.png的按钮。我想要的只是当用户将鼠标指针放在名为button-go.png的表单按钮上方以更改为button-go_light.png时。有什么更简单的方法可以在所有探险家中使用？

Answer 1

在 css 中

你想要这个： DEMO

.btn{
    background-image: url('button-go.png');
}

.btn:hover{
    background-image: url('button-go_light.png');
}

Answer 2

您需要使用:hover内联，如下所示：

<form  action="login_form.php"   method="POST"   id="login_form">
  Email  <input name="email" type="text" size="25" placeholder="type your email"/>
  Password  <input name="password" type="text" size="25" placeholder="type your password" /> 
  <input type="submit" value="" name="submit" style="{background:url('img/button-go.png') no-repeat;  width:68px;  height:27px;  border:none;  cursor:pointer;    }:hover {background:url('img/button-go_light.png');}"/>     
</form>

Answer 3

:hover的{{1}}将无法在IE6及更低版本中使用 - 因为<input>仅适用于那里的链接。所以，如果你也支持IE6-你必须使用JS-polyfill，以防{h}在悬停时改变bg-image。

当用户将鼠标指针放在它上面时，表单按钮必须改变颜色

3 个答案: