在图像悬停时创建具有图像精确尺寸的透明div

<div class="image-container">
  <img src="image.jpg" alt="Image">
</div>

.image-container {
  position: relative;
  width: 300px; /* 根据实际情况调整 */
  height: 200px; /* 根据实际情况调整 */
}

<div class="image-container">
  <img src="image.jpg" alt="Image">
  <div class="overlay"></div>
</div>

.image-container {
  position: relative;
  width: 300px; /* 根据实际情况调整 */
  height: 200px; /* 根据实际情况调整 */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置透明度为0.5的黑色遮罩层 */
  display: none; /* 初始状态下隐藏遮罩层 */
}

<div class="image-container">
  <img src="image.jpg" alt="Image">
  <div class="overlay"></div>
</div>

<script>
  const imageContainer = document.querySelector('.image-container');
  const overlay = imageContainer.querySelector('.overlay');

  imageContainer.addEventListener('mouseenter', () => {
    overlay.style.display = 'block';
  });

  imageContainer.addEventListener('mouseleave', () => {
    overlay.style.display = 'none';
  });
</script>