如何仅在悬停幻灯片时显示箭头html css javascript

<div class="slideshow">
  <div class="slide">
    <!-- 幻灯片1的内容 -->
  </div>
  <div class="slide">
    <!-- 幻灯片2的内容 -->
  </div>
  <div class="slide">
    <!-- 幻灯片3的内容 -->
  </div>
</div>

.slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide {
  display: none;
  width: 100%;
  height: 100%;
}

.slide.active {
  display: block;
}

.slide:hover .arrow {
  display: block;
}

.arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-image: url('arrow.png'); /* 替换为箭头图标的路径 */
  background-size: cover;
  cursor: pointer;
}

.arrow.left {
  left: 10px;
}

.arrow.right {
  right: 10px;
}

const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

function showSlide(index) {
  slides.forEach((slide, i) => {
    if (i === index) {
      slide.classList.add('active');
    } else {
      slide.classList.remove('active');
    }
  });
}

function nextSlide() {
  currentSlide++;
  if (currentSlide >= slides.length) {
    currentSlide = 0;
  }
  showSlide(currentSlide);
}

function prevSlide() {
  currentSlide--;
  if (currentSlide < 0) {
    currentSlide = slides.length - 1;
  }
  showSlide(currentSlide);
}

const arrowLeft = document.createElement('div');
arrowLeft.classList.add('arrow', 'left');
arrowLeft.addEventListener('click', prevSlide);

const arrowRight = document.createElement('div');
arrowRight.classList.add('arrow', 'right');
arrowRight.addEventListener('click', nextSlide);

slides.forEach((slide) => {
  slide.appendChild(arrowLeft.cloneNode(true));
  slide.appendChild(arrowRight.cloneNode(true));
});