利用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
