当鼠标放在元素上时如何更改CSS属性？

Question

）我有一个用于更改网站上按钮的 CSS 类的代码：window.onload = function(){    var button = document.getElementById("button");  button.addEventListener("mouseenter", function(){    button.classList.add("buttonclass1");  });  button.addEventListener("mouseleave", function(){    button.classList.add("bnative1");  })}I want to make like this: if(mouseenter){  button.addEventListener("mouseenter", function(){        button.classList.add("buttonclass1");      });}else{  button.addEventListener("mouseleave", function(){    button.classList.add("bnative1");}但这不起作用，通过改变这个类我想实现改变颜色。当鼠标放在按钮上时，它会发生变化，但当鼠标离开按钮时，它不会变回来。我该如何使用JS来实现呢？

Answer 1

你忘了在休假时切换开关...

window.onload = function(){

    var button = document.getElementById("button");

    button.addEventListener("mouseenter", function(){

        button.classList.remove("bnative1");

        button.classList.add("buttonclass1");

    });

    button.addEventListener("mouseleave", function(){

        button.classList.remove("buttonclass1");

        button.classList.add("bnative1");

    })

}

Answer 2

或者，如果您想要的只是添加颜色，则可以使用纯 css 来完成此操作。

.hover-bg-blue:hover {

  background-color: blue;

  color: white;

}

<button class="hover-bg-blue">Hello</button>