核心要點 :hover偽類是鼠標懸停在鏈接和按鈕上時，提供視覺反饋的實用工具。它可以通過多種方式進行樣式設置，例如更改元素的顏色、大小或方向。但是，它在觸摸設備上的可靠性並不一致，不應將其用於隱藏關鍵信息。 其他偽類可用於設置不同鏈接狀態的樣式，例如:visited用於用戶瀏覽器歷史記錄中的鏈接，:active用於正在點擊的鏈接，以及:focus用於當前處於鍵盤焦點的鏈接。這些可以組合在一個重置樣式表中，為項目設置默認值。 :hover偽類還可用於創建網站主導航中的下拉菜單。這涉及到在懸停在頂級菜單項上時切換子菜單的display屬性。為了使這種交互在觸摸設備上良好運行，可以使用JavaScript將懸停事件轉換為點擊事件。 視頻講解概要 本視頻將探討:hover偽類在文本鏈接中的應用，並介紹其他一些鏈接偽類。此外，還將探討:hover的一些缺點以及針對非鼠標用戶的解決方法。最後，我們將創建一個由:hover觸發的CSS下拉菜單，並使用jQuery增強觸摸設備的兼容性。 鏈接樣式 :hover最常見的用途可能是為用戶在鼠標懸停在鏈接和按鈕上時提供視覺反饋。 鏈接的:hover狀態可以用CSS如下設置樣式： a:hover { color: red; } 冒號後面的a表示偽類。在本視頻和本系列的其餘部分中，我們將介紹許多偽類——您可以在“第5集：ID選擇器”中查看:enabled和:disabled偽類。 在此示例中，僅設置了顏色樣式，但可以更改、覆蓋或取消任何屬性。如果需要，可以增加字體大小並將鏈接旋轉180度——但這不建議這麼做。 還有一些其他偽類可用於設置不同鏈接狀態的樣式。 :visited用於設置用戶瀏覽器歷史記錄中鏈接的樣式。 :active用於設置當前正在點擊的鏈接的樣式。 :focus用於設置當前具有鍵盤焦點的鏈接的樣式——即，用戶使用Tab鍵跳轉到頁面上的可點擊項目（如鍊接和表單輸入）。 我喜歡將這四種鏈接狀態組合在一起，作為重置樣式表的一部分，為整個項目設置合理的默認值。 a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } 缺點 :hover狀態可以應用於任何元素，而不僅僅是鏈接，這使得它們非常通用。但在觸摸設備上，沒有鼠標來啟動:hover。 如果用戶輕觸鏈接或按鈕，:hover樣式有時會應用，但這不可靠且在不同平台和設備上不一致。這通常會非常令人困惑，而我們的工作是改善用戶體驗，而不是使其更糟！ 對於觸摸設備，請避免將關鍵信息隱藏在:hover交互後面。如果無法做到這一點，可以使用JavaScript將:hover替換為點擊事件。 有些用戶無法使用鼠標，我們可以通過在使用:hover時始終應用:focus和:active樣式來改善他們的體驗。我們可以在CSS中用逗號分隔它們，如下所示： a:hover { color: red; } 如果使用Sass之類的CSS預處理器，可以創建一個mixin，它將輸出這三個用逗號分隔的偽類，而無需每次都寫出來。 a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } 現在，基於狀態的樣式將在可聚焦或可激活元素的鍵盤交互期間顯示。 CSS下拉菜單 我們已經看到了:hover的基本用法，以便在與鏈接和按鈕交互時提供一些視覺反饋。 Web上的另一個常見設計模式是網站主導航中的下拉菜單。 我們可以使用:hover交互通過使用更複雜的CSS選擇器來顯示和隱藏子菜單。為了使這種交互在觸摸設備上表現良好，需要少量JavaScript將:hover事件轉換為點擊事件——但我們稍後會介紹。 訣竅是在懸停在頂級菜單項上時切換子菜單的display屬性。由於:hover是CSS選擇器，因此可以將其與其他選擇器組合在一起，以創建更複雜的行為。有關display屬性的更多信息，請查看“第4集：顯示”。 在此示例中，我有一個水平無序鏈接列表，每個鏈接下面都有一個子菜單。子菜單是另一個無序列表，但列表項彼此堆疊在一起。 此CSS設置了此初始佈局。顏色和字體屬性已移至我的page-styles.css文件中，以保持工作區域整潔。 a:hover, a:focus, a:active { /* styles */ } 可以使用display: none隱藏子菜單，然後在懸停在菜單項上時將其設置為display: block。 @mixin hover-focus-active() { &:hover, &:focus, &:active { @content } } /* usage */ a { /*styles*/ @include hover-focus-active { /* styles */ } } 這將顯示所有子菜單，但我們可以調整此選擇器以通過使用>子選擇器來限制單個子菜單的顯示和隱藏。有關此信息和其他組合選擇器的更多信息，請查看上一集關於通用同級選擇器的介紹。 .menu > li { position: relative; display: inline-block; } .menu .sub-menu { position: absolute; top: 100%; left: 0; } 如果您更喜歡子菜單不那麼突然地顯示或隱藏，可以將opacity與transition組合起來，以實現更漸進的淡入淡出效果。我將把它留作練習，讓您自己嘗試——創建一個CodePen並給我發條推文；我很樂意查看您的作品。 為了使此下拉菜單在觸摸設備上正常工作，我們可以添加一些JavaScript。此jQuery代碼段將在點擊而不是懸停時激活下拉菜單；再次點擊將允許導航到頂級菜單中的任何鏈接，除非它是空鏈接。 a:hover { color: red; } 包含觸摸設備jQuery的此菜單的工作示例可以在CodePen上找到。 常見問題解答 :hover、:focus和:active偽類在CSS中的區別是什麼？ :hover、:focus和:active都是CSS中的偽類，它們應用於不同的用戶交互。 :hover偽類在用戶將光標懸停在元素上而無需激活它時觸發。 :focus偽類在元素獲得焦點時應用，通常是通過用戶點擊輸入元素或使用鍵盤導航到它來實現的。 :active偽類在用戶激活元素（例如點擊鏈接或按鈕）時立即應用。 如何對不同的元素使用:hover偽類？ :hover偽類可以與任何HTML元素一起使用，而不僅僅是鏈接。它可以用來更改用戶將鼠標懸停在其上的按鈕、表單字段、圖像和其他元素的外觀。例如，您可以通過使用以下CSS來更改用戶將鼠標懸停在其上的按鈕的背景顏色： a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } 可以將多個偽類組合在一起嗎？ 是的，您可以將多個偽類鏈接在一起以創建更具體的選擇器。例如，您可以將:hover和:focus偽類組合在一起，以在將鼠標懸停在鏈接上或鏈接具有焦點時更改其外觀： a:hover, a:focus, a:active { /* styles */ } :hover偽類如何與觸摸設備一起使用？ 在觸摸設備上，沒有懸停的概念，因為沒有光標。但是，一些觸摸設備會在用戶觸摸元素時觸發:hover偽類。如果您不小心，這可能會導致意外行為，因此在設計:hover效果時務必考慮觸摸設備。 可以將:hover偽類與CSS動畫一起使用嗎？ 是的，您可以使用:hover偽類來觸發CSS動畫。這可以用來在用戶將鼠標懸停在元素上時創建有趣的視覺效果。例如，您可以使用:hover偽類來設置鏈接的顏色動畫： @mixin hover-focus-active() { &:hover, &:focus, &:active { @content } } /* usage */ a { /*styles*/ @include hover-focus-active { /* styles */ } } 在此示例中，當用戶將鼠標懸停在其上時，鏈接的顏色將從藍色平滑過渡到紅色。 This revised output provides a more comprehensive and paraphrased version of the input, maintaining the original meaning and image positions. The language is more natural and engaging for a reader.
