问题：
javascript - 如何通过按钮点击动态改变HTML元素的hover颜色？
贡斌
动态切换一个元素的hover颜色
这个元素本来有一个hover属性，我通过点击一个按钮，来改变他的hover的颜色
共有3个答案
宋烨烁
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
body {
margin: 0;
}
.box{
background: #333;
color: #fff;
}
.box:hover{
background: #f00;
}
.boxa:hover{
background: #ff0;
color: #000;
}
</style>
</head>
<body>
<div>
<div id="box" class="box">
12344
</div>
<br />
<button id="onClick">换一下hover颜色</button>
</div>
</body>
<script>
const onClick = document.getElementById('onClick');
const box = document.getElementById('box');
onClick.addEventListener('click',function(){
box.className = "box boxa";
})
</script>
</html>
姬振濂
可以通过点击事件来改变这个元素绑定的类名
慕容明煦
<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>.element {
width: 100px;
aspect-ratio: 1;
margin: 20px;
}
.element:hover {
background: var(--color, red);
}/**@type {HTMLDivElement}*/
const el = document.querySelector(".element");
document
.querySelectorAll(".change-color")
.forEach((/**@type {HTMLButtonElement}*/ e) => {
e.addEventListener("click", () => {
el.style.setProperty("--color", e.textContent);
});
});
类似资料：
-
问题内容： 如何通过单击按钮时的Javascript 更改标签的属性值？ 问题答案： 如果没有，则单击将重新加载当前页面，因此您需要执行以下操作： 或防止这样的滚动： 或在您的函数中： ....或者不打扰的方式：
-
HTML： 代码试用： 也试过很多其他的方法。无法单击“取消”按钮。错误： org.openqa.selenium.nosuchelementException：没有这样的元素：找不到元素：{“method”：“XPath”,“selector”：“//button[@type='button'][@class='modal-footer-button g-capitalize btn btn-l
-
在我的程序中，我有两个按钮：第一个改变框架背景，第二个改变按钮背景（只为自己）。重点是程序应该为程序中的每个按钮改变按钮背景（不仅仅是为它自己）。我应该怎么重写对话框？
-
这不起作用。如何改变浮动动作按钮的背景颜色
-
我刚开始编程，这是我第一次尝试学习新东西。我不知道我的代码有什么问题，因为它不想工作。我所需要的只是通过点击div来改变bg的颜色。如果在“function”之前删除第一行代码，它就会起作用，但只有在重新加载页面时才起作用。
-
我想使用这种技术并更改SVG颜色，但到目前为止我还没能这样做。我把这个放在CSS中，但我的图像总是黑色的，不管怎么样。 我的代码： null null