如何扭轉 CSS :hover 的效果？

使用CSS 反轉:hover 的效果

:hover 偽類允許開發人員在滑鼠指標移動時將特定樣式應用於元素盤旋在他們上方。然而，通常需要為滑鼠離開元素時的實例定義對比效果。

是否有 CSS 替代 :hover 在滑鼠離開時觸發？

為了實現與 :hover 相反的效果（在滑鼠輸入時啟動），必須記住懸停的定義：它在滑鼠經過元素時選擇元素。因此，要扭轉這種行為，可以將滑鼠不在位於元素上的任何點作為目標。

實現反向效果

考慮一個用例，其中選單項目的顏色在懸停時從 #999 過渡到黑色。為了在滑鼠離開時創建相反的效果，我們可以將過渡移動到連結本身，而不是懸停狀態：

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

此解決方案確保當滑鼠離開時顏色從黑色過渡到#999離開連結區域。

此外，CSS-tricks 提供了一篇文章，示範如何為懸停開啟和懸停關閉設定不同的過渡狀態：

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

以上是如何扭轉 CSS :hover 的效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！