在網頁設計中，鼠標懸浮效果是一種常見的交互體驗。CSS 提供了一系列的樣式屬性和選擇器，可以讓我們輕松地實現鼠標懸浮效果。 ## :hover 偽類選擇器 我們可以使用 :hover 偽類選擇器來定義鼠標懸浮狀態下的樣式。比如，我們可以為鏈接設置懸浮效果，當鼠標懸浮在鏈接上時，改變文字顏色或者背景顏色。 例如，以下代碼可以定義鏈接的鼠標懸浮效果： ```css a:hover { color: red; } ``` ## transform 屬性 除了改變顏色，我們還可以使用 transform 屬性改變元素的形狀或者位置。比如，我們可以為圖片設置鼠標懸浮后的縮放效果。 例如，以下代碼可以定義圖片的鼠標懸浮效果： ```css img:hover { transform: scale(1.2); } ``` ## transition 屬性 為了使懸浮效果更加平滑，我們可以使用 transition 屬性定義過渡效果。比如，我們可以為按鈕設置鼠標懸浮后的背景顏色過渡效果，從而讓懸浮效果更加自然。 例如，以下代碼可以定義按鈕的鼠標懸浮效果： ```css button { background-color: blue; transition: background-color 1s ease-in-out; } button:hover { background-color: red; } ``` ## 總結 通過使用 :hover 偽類選擇器、transform 屬性和 transition 屬性，我們可以輕松地實現各種鼠標懸浮效果，從而為用戶帶來更好的交互體驗。以上代碼可以將其應用于任何需要鼠標懸浮效果的元素。