如何在将光标从按钮上移开时使悬停生效

.button:hover {
  background-color: #ff0000;
  color: #ffffff;
  border: 1px solid #ff0000;
}

<button id="myButton">按钮</button>

<script>
var button = document.getElementById("myButton");

button.addEventListener("mouseover", function() {
  button.style.backgroundColor = "#ff0000";
  button.style.color = "#ffffff";
  button.style.border = "1px solid #ff0000";
});

button.addEventListener("mouseout", function() {
  button.style.backgroundColor = "";
  button.style.color = "";
  button.style.border = "";
});
</script>

.button {
  animation: hoverEffect 1s infinite;
}

@keyframes hoverEffect {
  0% {
    background-color: #ffffff;
    color: #000000;
  }
  50% {
    background-color: #ff0000;
    color: #ffffff;
  }
  100% {
    background-color: #ffffff;
    color: #000000;
  }
}