19.4.1 选择器：E:hover、E:active和E:focus
E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式，使用方法如下所示：
<元素>:hover{
//指定样式
}
可以在"<元素>"中添加元素的type属性，使用方法类似如下：
input[type="text"]: hover{
//指定的样式
}
另外，所有UI元素状态伪类选择器的使用方法均与此类似，故后面不再赘述。
E:active选择器被用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式。
E:focus选择器被用来指定元素获得光标焦点时使用的样式，主要在文本框控件获得焦点并进行文字输入时使用。
代码清单19-18是使用了这3个选择器的综合示例，该示例中有两个文本框控件，使用这3个选择器来指定当鼠标指针移动到文本框控件上时、文本框控件被激活时，以及光标焦点落在文本框之内时的样式。
代码清单19-18 选择器E:hover、E:active和E:focus的使用示例
"http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http：//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>E:hover选择器、E:active选择器与E:focus选择器使用示例title>
head>
<style type="text/css">
input[type="text"]:hover{
background-color: greenyellow;
}
input[type="text"]:focus{
background-color: skyblue;
}
input[type="text"]:active{
background-color: yellow;
}
style>
<body>
<form>
<p>姓名：<input type="text" name="name" />p>
<p>地址：<input type="text" name="address" />p>
form>
body>
html>
对于示例中的任意一个文本框控件来说，这段代码的运行结果都可能有如下4种情况：
1）没有对文本框控件进行任何操作时的页面显示如图19-24所示（文本框背景色为白色）。
2）鼠标指针移动到某一个文本框控件上时的页面显示如图19-25所示（文本框背景色为绿色）。
3）文本框控件被激活时的页面显示如图19-26所示（文本框背景色为黄色）。
4）文本框控件获得光标焦点后的页面显示如图19-27所示（文本框背景色为浅蓝色）。
相关HTML 5与CSS 3权威指南：E:hover、E:active和E:focus