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

Question

我正在构建一个图像滑块，箭头键在图像上方。我想在离开箭头图标并进入图像时隐藏箭头图标。我已经得到了它的工作在左箭头图标，但一旦我悬停在右箭头它不渲染只有左箭头允许两个图标出现。我希望这两个图标都能够显示，无论哪一个是悬停。

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}
/>

Answer 1

应该使用onMouseEnter和onMouseLeave事件处理程序。将以下内容传递给每个箭头:onMouseEnter={showArrows} onMouseLeave={hideArrows}。这应该能成功。