Prevent triggering onMouseOut event when hover over children

Question

I have a div element and two children inside it. I want to show .portfolio-overlay when user hover over .portfolio-item and hide it when they leave that element.

const handleHover = () => {
        gsap.fromTo(overlay.current, {opacity: 0}, {opacity: 1, duration: .5});
    };

const handleLeave = () => {
     gsap.fromTo(overlay.current, {opacity: 1}, {opacity: 0, duration: .5});
};

<div className="portfolio-item" onMouseOver={handleHover} onMouseOut={handleLeave}>
     <div ref={overlay} className="portfolio-overlay">
           <h3>My header1</h3>
           <h4>My header2</h4>
     </div>
</div>

As you can see, I did that with gsap . But the problem is when I hover over h3 or h4 , handleLeave() and handleHover() functions are triggered and I see both animations again. How could I prevent that?

Answer 1

You can set the attribute "tabindex='-1'".

const handleHover = () => {
    gsap.fromTo(overlay.current, {opacity: 0}, {opacity: 1, duration: .5});
};

const handleLeave = () => {
     gsap.fromTo(overlay.current, {opacity: 1}, {opacity: 0, duration: .5});
};

<div tabindex="-1" className="portfolio-item" onMouseOver={handleHover} onMouseOut={handleLeave}>
     <div ref={overlay} className="portfolio-overlay">
           <h3>My header1</h3>
           <h4>My header2</h4>
     </div>
</div>