Как изменить свойство 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:
 <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>if(mouseenter){
  button.addEventListener("mouseenter", function(){
    		button.classList.add("buttonclass1");
    	});
}
else{
  button.addEventListener("mouseleave", function(){
		button.classList.add("bnative1");

}

Но это не работает, изменяя этот класс, я хочу добиться изменения цвета. Он меняется, когда мышь находится на кнопке, но не изменяется обратно, когда она выходит из кнопки. Как я могу добиться этого с помощью JS?

Answer 1

В качестве альтернативы, если все, что вам нужно, это добавить цвет, вы можете сделать это с чистым css.

.hover-bg-blue:hover {
  background-color: blue;
  color: white;
}

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

Answer 2

Вы забыли сделать переключение в отпуске ...

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");
    })
}