如何實現按鈕懸停時的淡入淡出效果
在本指南中，您可以瞭解如何在使用滑鼠懸停在按鈕上時，在兩種顏色之間實現平滑的淡入淡出效果。
在我們的按鈕示例中，我們可以透過為 :hover 動態偽類定義不同的背景顏色來更改按鈕的背景。然而，滑鼠懸停在按鈕上時，背景顏色會直接變為新顏色。為了在兩者之間建立更平滑的過渡，我們可以使用 CSS Transitions（CSS 過渡）。
使用過渡
在添加了懸停狀態所需的顏色後，將 transition 屬性新增到按鈕的規則中。對於簡單的過渡，transition 的值是您希望此過渡應用的屬性的名稱，以及過渡應該花費的時間。
對於 :active 和 :focus 偽類，將 transition 屬性設定為 none，這樣按鈕在點選時會直接變為活動狀態。
在示例中，過渡需要 1 秒鐘，您可以嘗試更改此值，看看速度變化帶來的不同效果。
html
<div class="wrapper">
<button class="fade">Hover over me</button>
</div>
css
.fade {
background-color: #db1f48;
color: white;
transition: background-color 1s;
}
.fade:hover {
background-color: #004369;
}
.fade:focus,
.fade:active {
background-color: black;
transition: none;
}
注意： transition 屬性是 transition-delay、transition-duration、transition-property 和 transition-timing-function 的簡寫。請參閱 MDN 上這些屬性的頁面，以找到調整過渡的方法。