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

Question

我有一个div元素和里面的两个子元素。我想在用户将鼠标悬停在.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做到了这一点。但问题是，当我将鼠标悬停在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>