如何通過點擊按鈕動態修改HTML元素的hover顏色？

利用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元素懸停顏色的功能。此方法簡潔、高效、易於維護。

以上是如何通過點擊按鈕動態修改HTML元素的hover顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！