如何為選單背景顏色添加平滑的懸停過渡？

透過過渡到選單懸停效果添加平滑過渡

您在懸停時轉換選單項目的背景顏色時遇到問題，如您的CSS 代碼所示。這個問題源於瀏覽器可能缺乏對過渡的支援。

要在Safari、Chrome、Firefox、Opera 和Internet Explorer 10 等現代瀏覽器中啟用過渡，請考慮修改您的程式碼：

a {
    background-color: #FF0;
}

a:hover {
    background-color: #AD310B;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

在此修訂後的程式碼中：

• 我們簡化了過渡屬性以僅針對背景顏色，從而減少了與其他屬性發生衝突的可能性。
• 我們已用線性取代了 Easy-in，這在瀏覽器之間提供了更一致的過渡效果。

使用此更新的程式碼，您現在應該將滑鼠懸停在支援的瀏覽器中的選單連結上時，觀察平滑的淡入淡出效果。

以上是如何為選單背景顏色添加平滑的懸停過渡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！