当鼠标悬停在一行中的一张卡片上时，其他卡片会离它更近1像素

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

.card-container {
  display: flex;
}

.card {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  margin-right: 10px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateX(-1px);
}

const cards = document.querySelectorAll('.card');

cards.forEach(card => {
  card.addEventListener('mouseover', () => {
    cards.forEach(otherCard => {
      if (otherCard !== card) {
        otherCard.style.transform = 'translateX(1px)';
      }
    });
  });

  card.addEventListener('mouseleave', () => {
    cards.forEach(otherCard => {
      if (otherCard !== card) {
        otherCard.style.transform = 'translateX(0)';
      }
    });
  });
});