[英]Prevent triggering onMouseOut event when hover over children
I have a div
element and two children inside it.我有一个div
元素和里面的两个孩子。 I want to show .portfolio-overlay
when user hover over .portfolio-item
and hide it when they leave that element.我想在用户 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>
As you can see, I did that with gsap
.如您所见,我使用gsap
做到了这一点。 But the problem is when I hover over h3
or h4
, handleLeave()
and handleHover()
functions are triggered and I see both animations again.但问题是当我 hover 通过h3
或h4
时, handleLeave handleLeave()
和handleHover()
函数被触发,我再次看到两个动画。 How could I prevent that?我怎么能阻止呢?
You can set the attribute "tabindex='-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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.