使用JavaScript和CSS反转悬停按钮的颜色

<button id="hoverButton">Hover Me</button>

#hoverButton {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

#hoverButton:hover {
  background-color: white;
  color: blue;
}

document.getElementById('hoverButton').addEventListener('mouseover', function() {
  this.style.backgroundColor = 'white';
  this.style.color = 'blue';
});

document.getElementById('hoverButton').addEventListener('mouseout', function() {
  this.style.backgroundColor = 'blue';
  this.style.color = 'white';
});

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('hoverButton').addEventListener('mouseover', function() {
    this.style.backgroundColor = 'white';
    this.style.color = 'blue';
  });

  document.getElementById('hoverButton').addEventListener('mouseout', function() {
    this.style.backgroundColor = 'blue';
    this.style.color = 'white';
  });
});

#hoverButton {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.5s, color 0.5s; /* 增加过渡时间 */
}