:hover
設定當使用者將指標移至元素上方時，元素所顯示的樣式。
語法
:hover { sRules }
可能的值
sRules
指定一或多個階層式樣式表屬性/值組的字串。
備註
「停留」是指使用者將指標放置在元素上方，但是沒有點選元素或啟動元素。例如，如果使用者的指標經過連結上方，當指標移開後連結的樣式會還原為一般狀態。:hover 虛擬類別通常會搭配 :active、:link 及 :visited 一起使用，這些虛擬類別會影響連結的其他狀態。
.gif "注意事項") 注意事項： |
|---|
虛擬類別的順序很重要。例如，:hover 的樣式規則必須發生在任何 :link 或 :visited 規則之後，以避免虛擬類別互相掩蓋。 |
在 Internet Explorer 7 與更新版本的標準相容模式 (精確 !DOCTYPE) 中，您可將 :hover 虛擬樣式套用至任何元素 (不限連結)。如果未將虛擬類別明確地套用至選取器中的元素 (如 A 標籤)，則會採用通用 (*) 選取器。不區分 :hover 虛擬類別的用途會對網頁效能造成負面影響。
範例
下列範例會設定錨點的停留樣式。當使用者將指標停留在連結上方時，文字會變成紅色的粗體字，而背景會變成米黃色：
<style>
a:hover {color:red; background-color:beige; font-weight:bolder;}
</style>
<a href="#below">Click here to move to the bottom of this page.</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="below"></a>
下列範例示範不用指令碼，只在 Internet Explorer 7 中使用 :hover 虛擬類別即可達成的效果類型：
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 Strict//EN">
<html>
<head><style type="text/css">
body:hover {background: url("wlbigielogo.gif") no-repeat center center;}
h1:hover {color: red;}
img {vertical-align: middle; }
.zoom img {zoom: 0.5;}
img:hover {zoom: 1.0; cursor: hand;}
img.spacer {width: 0px; height: 30px;}
</style>
</head>
<body>
<h1>Hover Here</h1>
<img class="spacer" src="blank.gif">
<span class="zoom">
<img src="A.gif">
<img src="B.gif">
<img src="C.gif">
. . .
<img src="X.gif">
<img src="Y.gif">
<img src="Z.gif">
</span>
</body></html>
標準資訊
此虛擬類別是在階層式樣式表 (CSS) 層級 2，修訂 1 (CSS2.1) (英文) 中定義。
適用於
A、ABBR、ACRONYM、ADDRESS、B、BIG、BLOCKQUOTE、BODY、CAPTION、CENTER、CITE、CODE、COL、COLGROUP、DD、DFN、DIV、DL、DT、EM、FORM、HN、HTML、I、IMG、INPUT、INPUT TYPE=BUTTON、INPUT TYPE=CHECKBOX、INPUT TYPE=FILE、INPUT TYPE=IMAGE、INPUT TYPE=PASSWORD、INPUT TYPE=RADIO、INPUT TYPE=RESET、INPUT TYPE=SUBMIT、INPUT TYPE=TEXT、LI、OL、P、S、SELECT、SPAN、SUB、TABLE、TBODY、TD、TFOOT、TH、THEAD、TR、TT、U、UL、VAR