利用css變量和JavaScript實現按鈕點擊動態修改元素懸停顏色
本文介紹如何通過點擊按鈕來動態改變html元素的懸停顏色，提升網頁交互體驗。我們將使用CSS變量和JavaScript來實現這一功能。
目標是：點擊按鈕，修改已存在的元素懸停樣式。 為此，我們將利用CSS變量定義懸停顏色，并通過JavaScript在按鈕點擊事件中修改CSS變量的值。
實現方案：
立即學習“前端免費學習筆記（深入）”；
首先，HTML結構包含目標元素（.element）和多個按鈕（.change-color），每個按鈕對應一種懸停顏色：
<div class="container"> <div class="element"></div> <button class="change-color">red</button> <button class="change-color">green</button> <button class="change-color">blue</button> </div>
CSS樣式定義元素基本樣式，并用CSS變量–color控制懸停顏色，默認紅色：
.element { width: 100px; height: 100px; /* aspect-ratio 不兼容所有瀏覽器，改為固定高度 */ margin: 20px; background-color: lightgray; /* 添加背景色，更易于觀察效果 */ } .element:hover { background: var(--color, red); }
最后，JavaScript代碼監聽每個按鈕的點擊事件。點擊按鈕后，獲取按鈕文本內容（顏色名稱），并用el.style.setProperty()方法將顏色值賦給CSS變量–color：
const el = document.querySelector(".element"); document.querySelectorAll(".change-color").forEach(e => { e.addEventListener("click", () => { el.style.setProperty("--color", e.textContent); }); });
通過HTML、CSS和JavaScript的協同工作，即可實現點擊按鈕動態更改html元素懸停顏色的功能。此方法簡潔、高效、易于維護。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
