如何添加当图像悬停时可单击的按钮？

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

.image-container {
  position: relative;
}

.clickable-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f00;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

const imageContainer = document.querySelector('.image-container');
const clickableButton = document.querySelector('.clickable-button');

imageContainer.addEventListener('mouseenter', function() {
  clickableButton.style.display = 'block';
});

imageContainer.addEventListener('mouseleave', function() {
  clickableButton.style.display = 'none';
});

clickableButton.addEventListener('click', function() {
  // 执行按钮点击后的操作
});