在鼠标悬停时显示图像

<div class="product" data-image="image.jpg">Product Name</div>

.product {
  width: 200px;
  height: 200px;
  background: #ccc;
  overflow: hidden;
}

.product img {
  display: none;
}

const products = document.querySelectorAll('.product');

products.forEach(product => {
  product.addEventListener('mouseover', () => {
    const imageUrl = product.getAttribute('data-image');
    const img = new Image();
    img.src = imageUrl;
    img.onload = () => {
      product.appendChild(img);
    };
  });

  product.addEventListener('mouseout', () => {
    const img = product.querySelector('img');
    if (img) {
      product.removeChild(img);
    }
  });
});