当用户将鼠标指针放在窗体按钮上时，该按钮必须更改颜色

form button must change color when user place mouse pointer over it

本文关键字：按钮 颜色 用户 鼠标指针 窗体      更新时间：2024-02-01

我有以下表格：

<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时。什么是更容易做到这一点的方法，适用于所有探险家？

在css中，您想要的是：DEMO

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

您需要使用: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>

<input>的:hover在IE6及以下版本中不起作用，因为:hover只适用于那里的链接。因此，如果您也支持IE6，您将不得不使用JS polyfill，以防您希望<input>s在悬停时更改bg图像。

相关文章：