CSS 與 JavaScript 實現滑鼠懸停切換圖片效果

前言

在網頁開發中，滑鼠懸停時切換圖片是常見的互動效果。本文將介紹如何結合 CSS 與 JavaScript 實現這一功能，並保持圖片位置不變。

核心實現思路

利用 JavaScript 封裝一個通用函數 mouseEvent，根據滑鼠進入（over）或離開（out）事件，動態修改容器的背景色、文字顏色以及內部圖片的 src 屬性。關鍵在於透過字串替換切換圖片檔名（如 1.png ↔ 2.png），且不改變佈局結構。

完整代碼示例

<script>
function mouseEvent(o, over) {
    o.style.background = over ? '#ffc000' : '#ffffff';
    o.style.color = over ? '#ffffff' : '#888888';
    var img = o.getElementsByTagName('img')[0];
    if (!img) return;
    img.src = img.src.replace(over ? '1.png' : '2.png', over ? '2.png' : '1.png');
}
</script>

<div style="height: 100px; color: #888888;" onmouseover="mouseEvent(this,true)" onmouseout="mouseEvent(this)">
    <img src="1.png" alt="預設圖片">
    內容區域
</div>

關鍵點解析

• 事件綁定：使用 onmouseover 與 onmouseout 直接在元素上綁定，傳遞 this 參數指向當前容器。
• 圖片切換邏輯：replace() 方法根據 over 布林值決定替換方向，確保來回切換正確。
容錯處理：若容器內無 <img> 標籤則直接返回，避免報錯。

優化建議

現代開發建議使用 CSS :hover 偽類處理樣式變更，JavaScript 僅負責圖片 src 切換，實現關注點分離。亦可考慮使用 data-* 屬性儲存圖片路徑，避免依賴檔名規則。