将鼠标悬停在一个按钮上也会影响其他按钮

<button class="button">按钮1</button>
<button class="button">按钮2</button>
<button class="button">按钮3</button>

.button {
  background-color: #ccc;
}

.button:hover {
  background-color: #f00;
}

const buttons = document.querySelectorAll('.button');

buttons.forEach(button => {
  button.addEventListener('mouseover', () => {
    buttons.forEach(otherButton => {
      if (otherButton !== button) {
        otherButton.classList.add('hovered');
      }
    });
  });

  button.addEventListener('mouseout', () => {
    buttons.forEach(otherButton => {
      if (otherButton !== button) {
        otherButton.classList.remove('hovered');
      }
    });
  });
});