偽類選擇符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元素。