当鼠标悬停在上面的图像上时，如何更改滑块的不透明度？

<div class="image-container">
  <img src="image.jpg" alt="图像">
  <div class="slider"></div>
</div>

.image-container {
  position: relative;
}

.slider {
  background-color: transparent;
  width: 100px;
  height: 10px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

const imageContainer = document.querySelector('.image-container');
const slider = document.querySelector('.slider');

imageContainer.addEventListener('mouseover', () => {
  slider.style.opacity = 1;  // 设置滑块不透明度为1，完全显示
});

imageContainer.addEventListener('mouseout', () => {
  slider.style.opacity = 0;  // 设置滑块不透明度为0，完全隐藏
});