当鼠标放在元素上时如何更改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 {&nbsp; background-color: blue;&nbsp; color: white;}<button class="hover-bg-blue">Hello</button>