如何通過點(diǎn)擊按鈕動(dòng)態(tài)修改HTML元素的hover顏色？

利用css變量和JavaScript實(shí)現(xiàn)按鈕點(diǎn)擊動(dòng)態(tài)修改元素懸停顏色

本文介紹如何通過點(diǎn)擊按鈕來動(dòng)態(tài)改變html元素的懸停顏色，提升網(wǎng)頁交互體驗(yàn)。我們將使用CSS變量和JavaScript來實(shí)現(xiàn)這一功能。

目標(biāo)是：點(diǎn)擊按鈕，修改已存在的元素懸停樣式。 為此，我們將利用CSS變量定義懸停顏色，并通過JavaScript在按鈕點(diǎn)擊事件中修改CSS變量的值。

實(shí)現(xiàn)方案：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

首先，HTML結(jié)構(gòu)包含目標(biāo)元素（.element）和多個(gè)按鈕（.change-color），每個(gè)按鈕對應(yīng)一種懸停顏色：

<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控制懸停顏色，默認(rèn)紅色：

.element {   width: 100px;   height: 100px; /* aspect-ratio 不兼容所有瀏覽器，改為固定高度 */   margin: 20px;   background-color: lightgray; /* 添加背景色，更易于觀察效果 */ }  .element:hover {   background: var(--color, red); }

最后，JavaScript代碼監(jiān)聽每個(gè)按鈕的點(diǎn)擊事件。點(diǎn)擊按鈕后，獲取按鈕文本內(nèi)容（顏色名稱），并用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的協(xié)同工作，即可實(shí)現(xiàn)點(diǎn)擊按鈕動(dòng)態(tài)更改html元素懸停顏色的功能。此方法簡潔、高效、易于維護(hù)。