Question

我有一个div元素和两个孩子。我想在用户将鼠标悬停在.portfolio-overlay上时显示.portfolio-item，并在他们离开该元素时将其隐藏。

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完成的。但是问题是当我将鼠标悬停在h3或h4上时，会触发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>

将鼠标悬停在子项上时，防止触发onMouseOut事件

1 个答案: