如何讓 CSS 懸停狀態在滑鼠移開後保持不變？

在懸停後維護CSS 懸停狀態

在網頁設計中，懸停狀態允許用戶將滑鼠懸停在頁面上的元素上進行轉換他們。但是，在某些情況下，即使在使用者滑鼠離開元素後，也希望懸停狀態能夠持續存在。

考慮以下程式碼片段：

#about {
  height: 25px;
  width: 84px;
  background-image: url('about.png');
  position: absolute;
  top: 200px;
  left: 0px;
}

#onabout {
  height: 200px;
  width: 940px;
  position: absolute;
  top: 60px;
  left: 0px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 300;
  display: none;
}

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

此程式碼使用 :hover當滑鼠懸停在另一個元素 (#about) 上時顯示一個元素 (#onabout) 的偽類。然而，當使用者將滑鼠從#about 上移開時，#onabout 就會消失。

為了讓懸停狀態持續存在，CSS 提供了幾個選項。一種方法是引入過渡屬性：

#about {
  ...
  transition: 0.2s ease;
}

#about:hover #onabout {
  transition: 0.2s ease;
  opacity: 1;
}

此程式碼在將滑鼠懸停在 #about 上並移開時添加平滑的過渡效果。也修改了 opacity 屬性，以確保 #onabout 在滑鼠離開 #about 後仍然可見。

另一種方法涉及使用:active 偽類：

#about {
  ...
  cursor: pointer;
}

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

#about:active #onabout {
  opacity: 1;
  transition: 0.2s ease;
}

此程式碼新增了一個遊標指示#about 是可點擊的，並使用:active 在元素點擊時保持懸停狀態。這種過渡確保了無縫的視覺體驗。

最後，對於那些尋求更高級解決方案的人，CSS3 提供了animation-play-state 屬性：

#onabout {
  display: block;
  animation-name: hover;
  animation-play-state: paused;
}

#about:hover #onabout {
  animation-play-state: running;
}

這段程式碼引入了一個帶有@keyframes 懸停聲明並預設暫停。當使用者將滑鼠懸停在 #about 上時，animation-play-state 將設定為正在運行，啟動動畫並即使在滑鼠離開元素後也保持懸停狀態。

以上是如何讓 CSS 懸停狀態在滑鼠移開後保持不變？的詳細內容。更多資訊請關注PHP中文網其他相關文章！