首页 > 代码库 > 选择器(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的使用)