当前位置: 首页 > 知识库问答 >
问题:

javascript - 如何通过按钮点击动态改变HTML元素的hover颜色?

贡斌
2024-07-17

动态切换一个元素的hover颜色

这个元素本来有一个hover属性,我通过点击一个按钮,来改变他的hover的颜色

共有3个答案

宋烨烁
2024-07-17
<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>
姬振濂
2024-07-17

可以通过点击事件来改变这个元素绑定的类名

慕容明煦
2024-07-17
<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

  • 我用selenium和python一起使用,我试图点击一个按钮,但它似乎不起作用。下面是html结构的图片: 这里 我已经尝试通过xpath和类单击该按钮,但没有成功。它也没有给我一个错误。我为每一个答案感到高兴!

  • 我一直试图改变材质的浮动动作按钮颜色,但没有成功。 我曾试图补充: 或通过代码: 或 但上述方法都不奏效。我也试过提出的重复问题中的解决方案,但都行不通;按钮保持绿色,也变成了正方形。 附注。如果知道如何添加涟漪效果也会很好,也不能理解。