利用CSS变量和JavaScript实现按钮点击动态修改元素悬停颜色
本文介绍如何通过点击按钮来动态改变HTML元素的悬停颜色，提升网页交互体验。我们将使用CSS变量和JavaScript来实现这一功能。
目标是：点击按钮，修改已存在的元素悬停样式。 为此，我们将利用CSS变量定义悬停颜色，并通过JavaScript在按钮点击事件中修改CSS变量的值。
实现方案：
立即学习“前端免费学习笔记（深入）”；
首先，HTML结构包含目标元素（.element）和多个按钮（.change-color），每个按钮对应一种悬停颜色：
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元素悬停颜色的功能。此方法简洁、高效、易于维护。
