将按钮放置在图像悬停位置

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

.image-container {
  position: relative;
}

.hover-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

const imageContainer = document.querySelector('.image-container');
const hoverButton = document.querySelector('.hover-button');

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

imageContainer.addEventListener('mouseleave', () => {
  hoverButton.style.display = 'none';
});