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?

Does this answer your question? [Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery](https://stackoverflow.com/questions/4697758/prevent-onmouseout-when-hovering-child-element-of-the-parent-absolute-div-withou) — Zach Saucier, Oct 07 '20 at 13:46
It does. Your question is an exact duplicate. Try the answers out. — Zach Saucier, Oct 07 '20 at 19:47

score 1 · Answer 1 · answered Oct 07 '20 at 13:53

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>

Prevent triggering onMouseOut event when hover over children

1 Answers1