动态修改html元素悬停颜色：点击按钮即时改变样式
本文介绍如何通过点击按钮来实时改变HTML元素的悬停（hover）颜色，实现用户交互驱动的视觉反馈效果。 我们将逐步讲解实现方法。
首先，构建HTML结构：包含一个目标div元素（.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定义样式和hover效果。 关键是利用CSS变量--color动态控制hover颜色，初始颜色设置为红色。
立即学习“前端免费学习笔记（深入）”；
.element {
width: 100px;
height: 100px; /* 使用height代替aspect-ratio，更清晰易懂 */
margin: 20px;
}
.element:hover {
background: var(--color, red);
}
最后，JavaScript代码处理按钮点击事件。 它获取所有.change-color按钮，并为每个按钮添加点击事件监听器。 点击按钮后，将按钮文本内容（颜色名称）设置为CSS变量--color的值，从而动态修改.element元素的hover颜色。
const element = document.querySelector(".element"); // 更简洁的变量名
document.querySelectorAll(".change-color").forEach(button => {
button.addEventListener("click", () => {
element.style.setProperty("--color", button.textContent);
});
});
通过HTML、CSS和JavaScript的协同工作，即可实现点击按钮动态改变HTML元素悬停颜色的功能。 这种方法使用CSS变量，使代码简洁、易于理解、扩展和维护。
