一、利用 CSS 實現簡單的視覺效果變化（顏色、大小、透明度等）

• 顏色變化特效：

• 原理：通過 CSS 的:hover偽類選擇器，當鼠標懸停在指定元素上時，改變元素的背景顏色或文本顏色等屬性來呈現特效。

• 示例代碼：
     假設我們有一個 HTML 頁面中有一個按鈕元素，想讓它在鼠標懸停時改變背景顏色。

在上述代碼中，定義了按鈕的初始樣式，然后使用:hover偽類來指定當鼠標懸停時，按鈕的背景顏色改變為另一種藍色，同時利用transition屬性讓顏色變化過渡自然。

• 大小變化特效：

• 原理：同樣基于:hover偽類，改變元素的尺寸屬性（如寬度、高度等），并且可以配合transition屬性讓尺寸變化有一個平滑的過程，產生動態效果。

• 示例代碼：
     以下是讓一個圖片元素在鼠標懸停時放大的代碼示例。

• 透明度變化特效：

• 原理：借助:hover偽類改變元素的opacity（透明度）屬性，來實現鼠標懸停時元素從清晰到半透明或者相反的效果變化，營造出獨特的視覺感受。

• 示例代碼：
     假設有一個段落元素，希望在鼠標懸停時變為半透明狀態，代碼如下：

二、使用 JavaScript 實現更復雜的交互特效（顯示隱藏內容、動畫效果等）

• 顯示隱藏額外內容特效：

• 原理：通過 JavaScript 監聽鼠標的懸停事件（mouseover和mouseout），然后根據事件觸發來改變元素的顯示狀態（如從display: none變為display: block，或者相反），以此實現鼠標懸停時顯示隱藏特定內容的效果。

• 示例代碼：
     以下是一個當鼠標懸停在一個標題元素上時，顯示隱藏對應解釋內容的示例。

• 動畫效果特效（以簡單的元素移動為例）：

• 原理：利用 JavaScript 監聽鼠標懸停事件，然后在事件觸發時，通過改變元素的style屬性中的位置相關屬性（如left、top等，通常需要配合position屬性設置為absolute或relative），并結合定時器或者requestAnimationFrame等技術來逐幀更新元素位置，實現動畫移動效果。

• 示例代碼：
     以下是讓一個div元素在鼠標懸停時向右移動一定距離的簡單動畫示例，采用了setInterval定時器來實現逐幀更新位置。

三、綜合運用 CSS 和 JavaScript 實現更豐富的懸停特效

• 圖片切換特效（鼠標懸停切換不同圖片）：

• 原理：CSS 負責定義圖片容器以及圖片的初始樣式、過渡效果等，JavaScript 則用于監聽鼠標懸停事件，在事件觸發時改變圖片的src（源）屬性，實現切換不同圖片展示的效果，同時利用 CSS 的過渡效果讓圖片切換過程更平滑自然。

• 示例代碼：
     以下是一個簡單的鼠標懸停在圖片上切換為另一張圖片的示例代碼。