:hover

定義和用法

• :hover，鼠標(biāo)移到鏈接上時(shí)。最常見(jiàn)的例子是將鼠標(biāo)指針移動(dòng)到超鏈接的邊界內(nèi)
• :hover，是一個(gè)偽類，它適用于處于懸停狀態(tài)的元素。
• :hover，可用于所有元素，不僅是鏈接。
• :link選擇器設(shè)置了未訪問(wèn)過(guò)的頁(yè)面鏈接樣式。:visited選擇器設(shè)置訪問(wèn)過(guò)的頁(yè)面鏈接的樣式。:active選擇器設(shè)置當(dāng)你點(diǎn)擊鏈接時(shí)的樣式。
• 為了產(chǎn)生預(yù)期的效果，在 CSS 定義中，:hover必須位于:link和:visited之后！

語(yǔ)法:

E:hover

設(shè)置元素在其鼠標(biāo)懸停時(shí)的樣式。

• 如果需要給超鏈接定義：訪問(wèn)前，鼠標(biāo)懸停，當(dāng)前被點(diǎn)擊，已訪問(wèn)。這4種偽類效果，而又沒(méi)有按照一致的書(shū)寫(xiě)順序，不同的瀏覽器可能會(huì)有不同的表現(xiàn)
• 超鏈接的4種狀態(tài)，需要有特定的書(shū)寫(xiě)順序才能生效。超鏈接狀態(tài)順序:：:link、:visited、:hover、:active。注意，:hover必須位于:link和:visited之后，:active必須位于:hover之后

注意:在觸摸屏上:hover有問(wèn)題，基本不可用。不同的瀏覽器上:hover偽類表現(xiàn)不同。可能從不會(huì)觸發(fā)；或者在觸摸某元素后觸發(fā)了一小會(huì)兒；或者總是觸發(fā)即使用戶不在觸摸了，直到用戶觸摸別的元素。觸摸屏非常普遍，所以網(wǎng)頁(yè)開(kāi)發(fā)人員不要讓任何內(nèi)容只能通過(guò)懸停才能展示出來(lái)，不然這些內(nèi)容對(duì)于觸摸屏使用者來(lái)說(shuō)是很難或者說(shuō)不可能看到。

瀏覽器支持

所有瀏覽器都支持

例子

:link:hover { outline: dotted red; }.foo:hover { background: gold; }

下拉按鈕

使用:hover偽類可以創(chuàng)建復(fù)雜的層疊機(jī)制。一個(gè)常見(jiàn)用途，比如，創(chuàng)建一個(gè)純CSS的下拉按鈕（不使用JavaScript）。本質(zhì)是創(chuàng)建如下的CSS：

div.menu-bar ul ul {display: none;}div.menu-bar li:hover > ul {display: block;}

HTML內(nèi)容如下:

• menu
  • link
  • submenu
    • submenu
      • link
      • link
      • link
      • link
    • link