如何在滑鼠離開元素後保持 CSS 懸停狀態處於活動狀態？

「取消懸停」後維護CSS 懸停狀態

在網頁設計中，懸停狀態通常用於在懸停時顯示附加內容或效果在一個元素上。然而，當滑鼠指標離開元素時，這種狀態通常會消失。本文探討了一種 CSS 解決方案，即使在「取消懸停」後也能保持懸停狀態。

問題

許多初學者都會遇到保持懸停狀態的挑戰。例如，請考慮以下範例程式碼：

#about:hover #onabout {
  display: block;
}

將滑鼠懸停在 #about 元素上時，#onabout 元素變得可見。但是，一旦懸停狀態結束，它就會消失。

CSS 解決方案

幸運的是，CSS 提供了使用過渡延遲的解決方案。此屬性指定在應用 CSS 轉換之前等待的時間。透過將其設為非零值，我們可以在取消懸停後將懸停狀態保持一段時間。

div img {
  transition: 0s 180s;
  opacity: 0;
}

div:hover img {
  opacity: 1;
  transition: 0s;
}

此程式碼可確保影像（img）在取消懸停後 180 秒內保持可見。

替代方法

另一種CSS技術涉及使用變換和焦點淡入淡出

div:hover img:focus {
  transition: 3s;
  opacity: 0;
  transform: rotate(-360deg) scale(0.23);
}

此方法需要將tabindex 添加到 中。

透過使用這些 CSS 技術，即使在取消懸停後也可以保持懸停狀態，從而增強網頁上的使用者體驗。

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