:hover

設定當使用者將指標移至元素上方時,元素所顯示的樣式。

語法

:hover {sRules}

可能的值

sRules

指定一或多個階層式樣式表屬性/值組的字串。

備註

「停留」 是指使用者將指標放置在元素上方,但是沒有點選元素或啟動元素。例如,如果使用者的指標經過連結上方,當指標移開後連結的樣式會還原為一般狀態。 :hover 虛擬類別通常會搭配 :active:link:visited 一起使用,這些虛擬類別會影響連結的其他狀態。

Note注意:

虛擬類別的順序很重要。例如, :hover 的樣式規則必須放在任何 :link:visited 規則後面,以避免虛擬類別互相掩蓋。

在 Internet Explorer 7 與更新版本的標準相容模式 (精確 !DOCTYPE ) 中,您可將 :hover 虛擬樣式套用至任何元素 (不限連結)。如果未將虛擬類別明確地套用至選取器中的元素 (如 A 標籤),則會採用 Universal (*) Selector 。不區分 :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>

標準資訊

您可以在 Cascading Style Sheets (CSS), Level 2, Revision 1 (CSS2.1) (階層式樣式表 (CSS) 層級 2,修訂 1 (CSS2.1)) Ee371281.xtlink_newWindow(zh-tw,Expression.40).png 找到此虛擬類別的定義。

適用範圍

a , abbr , acronym , address , b , big , blockquote , body , caption , center , cite , code , col , colgroup , dd , dfn , dir , div , dl , dt , em , form , hn , html , i , img , input , input type=button , input type=checkbox , input type=file , input type=hidden , input type=image , input type=password , input type=radio , input type=reset , input type=submit , input type=text , kbd , label , legend , li , listing , marquee , menu , ol , p , plaintext , pre , s , samp , select , small , span , strike , strong , sub , sup , table , tbody , td , textarea , tfoot , th , thead , tr , tt , u , ul , var , xmp

另請參閱

概念

:active
:link
:visited