偽類選擇子E:hover的定義與用法:
設定元素在其滑鼠懸停時的樣式。
E元素可以透過其他選擇器來選擇，例如使用類別選擇符、id選擇符、類型選擇符等等。
特別說明:IE6並非不支援此選擇符，但能夠支援a元素的:hover ，也就是只支援透過型別選擇符選擇的a元素的:hover 。
語法結構:
E:hover{ Rules }
瀏覽器支援:
IE瀏覽器支援此選擇符。
火狐瀏覽器支援此選擇符。
谷歌瀏覽器支援此選擇符。
opera瀏覽器支援此選擇符。
實例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.manongjc.com/article/1323.html" />
<title>CSS教程</title>
<style type="text/css">
#div:hover{color:#F60;}
.js:hover{color:green;}
</style>
</head>
<body>
<ul>
<li><a href="#">html专区</a></li>
<li><a href="#" id="div">div+css专区</a></li>
<li><a href="#" class="js">javascript专区</a></li>
<li><a href="#">Jquery专区</a></li>
</ul>
</body>
</html>使用類型選擇符設定超連結的存取前的樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.manongjc.com/article/1323.html" />
<title>CSS教程</title>
<style type="text/css">
#div:hover{color:#F60;}
.js:hover{color:green;}
</style>
</head>
<body>
<ul>
<li><a href="#">html专区</a></li>
<li><a href="#" id="div">div+css专区</a></li>
<li><a href="#" class="js">javascript专区</a></li>
<li><a href="#">Jquery专区</a></li>
</ul>
</body>
</html>透過類別選擇符和id選擇符設定超連結在其滑鼠懸停時的樣式。在IE6中並不支援。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.manongjc.com" />
<title>码农教程</title>
<style>
div {
width:100px;
height:50px;
background:#ccc;
}
div:hover {
background:green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>上面的程式碼可以在滑鼠懸浮於div時改變它的背景色，同時也說明，:hover偽類不僅作用域連結a元素。
