How to get onMouseOver to work on both elements

I’m building an image slider with arrow keys above the image. I want to hide the arrow icons upon leaving the arrow icons and entering the image. I have gotten it to work on the left arrow icon but once I hover over the right arrow it doesn’t render only the left arrow allows both icons to appear. I would like for both icons to be able to display no matter which one is hovered.

 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

You should use onMouseEnter and onMouseLeave event handlers. Pass the following to each of your arrows: onMouseEnter={showArrows} onMouseLeave={hideArrows}. This should do the trick.

Advertisement

Answer