如何使不同的抽认卡出现时，你悬停在一个图像的不同部分

<div class="image-container">
  <img src="your-image.jpg" alt="Your Image">
  <div class="flashcard" id="card1">
    <h3>Card 1</h3>
    <p>Content for Card 1</p>
  </div>
  <div class="flashcard" id="card2">
    <h3>Card 2</h3>
    <p>Content for Card 2</p>
  </div>
</div>

.image-container {
  position: relative;
  width: 500px; /* 设置图像容器的宽度 */
  height: 300px; /* 设置图像容器的高度 */
}

.flashcard {
  position: absolute;
  top: 50%; /* 将抽认卡垂直居中 */
  left: 50%; /* 将抽认卡水平居中 */
  transform: translate(-50%, -50%); /* 使用负的50%的偏移量实现居中 */
  background-color: #fff;
  width: 200px;
  height: 150px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: none; /* 初始时隐藏抽认卡 */
}

.flashcard h3 {
  margin-top: 0;
}

.flashcard p {
  margin-bottom: 0;
}

// 获取图像容器和抽认卡元素
const imageContainer = document.querySelector('.image-container');
const cards = document.querySelectorAll('.flashcard');

// 给图像容器添加鼠标移入事件
imageContainer.addEventListener('mouseover', function(event) {
  // 获取鼠标相对于图像容器的位置
  const x = event.offsetX;
  const y = event.offsetY;

  // 根据鼠标位置显示对应的抽认卡
  if (x < imageContainer.offsetWidth / 2 && y < imageContainer.offsetHeight / 2) {
    showCard(1);
  } else if (x > imageContainer.offsetWidth / 2 && y < imageContainer.offsetHeight / 2) {
    showCard(2);
  } else {
    hideAllCards();
  }
});

// 显示指定的抽认卡
function showCard(cardIndex) {
  hideAllCards(); // 首先隐藏所有抽认卡
  cards[cardIndex - 1].style.display = 'block';
}

// 隐藏所有抽认卡
function hideAllCards() {
  cards.forEach(card => {
    card.style.display = 'none';
  });
}