首页 > 代码库 > 选择器(E:hover/E:active/E:focus的使用)
选择器(E:hover/E:active/E:focus的使用)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
input[type=text]:hover {
background-color:limegreen;
}
input[type=text]:active {
background-color:skyblue;
}
input[type=text]:focus{
background-color:#00ff90;
}
</style>
</head>
<body>
<!-- E：hover
选择器被用来指定当鼠标指针移动到元素上时，元素所使用的样式，方法如下：
<元素>：hover
{
//指定样式。
}
-->
<!-- E：active
选择器被用来指定元素被激活（就是按下没有释放时）所使用的样式。 -->
<!-- E：focus
选择器被用来指定元素获取焦点时所使用的样式。 -->
<form>
<p>姓名：<input type="text" name="name" /></p>
<p>地址：<input type="text" name="address" /></p>
</form>
</body>
</html>
效果如下：
选择器(E:hover/E:active/E:focus的使用)