如何让 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}。这应该可以解决问题。

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

How to get onMouseOver to work on both elements

javascript

onmouseover

reactjs