如何让 onMouseOver 在这两个元素上工作

问题描述

我正在构建一个带有图像上方箭头键的图像滑块。我想在离开箭头图标并输入图像时隐藏箭头图标。我已经让它在左箭头图标上工作，但是一旦我将鼠标悬停在右箭头上，它就不会仅呈现左箭头允许出现两个图标。我希望无论鼠标悬停在哪个图标上，这两个图标都能够显示。

 const hideArrows = (e) => {
    setIsHover(false);
  };

  const showArrows = (e) => {
    setIsHover(true);
  };

  return (
    <section className="slider">
      <FaIcons.FaArrowAltCircleLeft
        className={isHover ? "left-arrow" : "hide"}
        onClick={prevSlide}
        onMouseOver={showArrows}
      />

      <FaIcons.FaArrowAltCircleRight
        className={isHover ? "right-arrow" : "hide"}
        onClick={nextSlide}
        onMouseOver={showArrows}
      />

解决方法

您应该使用 onMouseEnter 和 onMouseLeave 事件处理程序。将以下内容传递给您的每个箭头：onMouseEnter={showArrows} onMouseLeave={hideArrows}。这应该可以解决问题。