如何在遊標移開後保持 CSS 懸停狀態處於活動狀態？

「取消懸停」後維護CSS 懸停狀態：初學者的視角

作為一名嶄露頭角的網頁設計師，您可能會遇到CSS 懸停狀態的挑戰。雖然懸停效果在懸停時無縫地顯示圖像，但當用戶離開元素時，您可能會面臨圖像消失的困境。本文解決了這個問題，指導初學者使用純 CSS 解決方案。

提供的程式碼片段示範如何使用懸停選擇器 (#about:hover) 來觸發 #onabout 的顯示。然而，一旦懸停效果停止，#onabout 就會恢復到初始隱藏狀態。

為了解決這個問題，我們探討了一種優雅的 CSS 技術：transition-delay。

使用轉換延遲：

向元素添加一個轉換延遲屬性觸發懸停狀態（在本例中為#about）。此延遲為懸停效果在轉換到原始狀態之前提供了一段緩衝時間。以下是一個範例程式碼片段：

#about:hover #onabout {
  display: block;
  transition-delay: 180s;
}

透過設定較高的轉換延遲（例如 180 秒），您實際上可以延長即使在遊標移開後懸停狀態仍保持的持續時間。這讓使用者有足夠的時間在視覺上吸收顯示的影像。

結論：

利用 CSS 懸停狀態是增強網頁設計的有效方法。透過合併轉換延遲，您可以確保懸停狀態持續超出使用者的初始操作，從而提供更具吸引力的使用者體驗。

以上是如何在遊標移開後保持 CSS 懸停狀態處於活動狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！