如何讓CSS懸停效果在懸停結束後持續存在？

使CSS 懸停狀態在懸停結束後保持不變

將滑鼠懸停在具有CSS 的元素上時，您可能希望即使停止懸停後更改仍然可見。當利用 CSS 懸停功能在懸停時顯示圖像時，可能會出現此問題。

CSS 解：

一個有效的解決方案涉及利用轉換延遲屬性。此屬性為從一種狀態到另一種狀態的轉換添加了延遲，允許圖像在懸停後保持可見。以下是一個範例：

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

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

在此程式碼中，從不透明度 0 到不透明度 1 的過渡延遲了 180 秒，確保影像在懸停結束後的一段時間內保持可見。

其他注意事項：

• 您可以調整過渡延遲值來控制懸停後影像的可見持續時間。
• 您也可以使用替代技術，例如將不透明度設為 0.99 而不是 1，以創建半透明效果。
• 如果您需要更複雜的功能，請考慮使用 JavaScript 或 jQuery 來處理懸停狀態變更。

以上是如何讓CSS懸停效果在懸停結束後持續存在？的詳細內容。更多資訊請關注PHP中文網其他相關文章！