當 hover 超過孩子時防止觸發 onMouseOut 事件

Question

我有一個div元素和里面的兩個孩子。 我想在用戶 hover 超過.portfolio-item時顯示.portfolio-overlay並在他們離開該元素時隱藏它。

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>

如您所見，我使用gsap做到了這一點。 但問題是當我 hover 通過h3或h4時， handleLeave handleLeave()和handleHover()函數被觸發，我再次看到兩個動畫。 我怎么能阻止呢？

Answer 1

您可以設置屬性“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>