Mouseover SplitText Problem

[Anatole Touvron]

Hi, 

 

I am having some issue. I want to trigger an animation with SplitText (that I will do later) when I have my mouse over the div that contains the word of my nav. But when I target the word's container and that my mouse is over the word, it targets each letter and consider that the mouse is not over the div. (We can see it in the console). 

 

Could you help me ? 

 

Thanks ! 

See the Pen ExaoRbW by Anathug (@Anathug) on CodePen

[ZachSaucier]

Hey Anatole and welcome to the GreenSock forums! Thanks for being a Club GreenSock member.

 

The easiest way to fix this is to disable pointer events for the children of the element that you have the mouseover event for. You can do that in this case by setting pointer-events: none; on .linkcontainer. Alternatively, you could apply it to .link > * instead.

 

Side note: I recommend looping through each navigation item to apply the animation and mouse enter/exit events, but I assume you know how to do that  

[Anatole Touvron]

28 minutes ago, ZachSaucier said:

Hey Anatole and welcome to the GreenSock forums! Thanks for being a Club GreenSock member.

 

The easiest way to fix this is to disable pointer events for the children of the element that you have the mouseover event for. You can do that in this case by setting pointer-events: none; on .linkcontainer. Alternatively, you could apply it to .link > * instead.

 

Side note: I recommend looping through each navigation item to apply the animation and mouse enter/exit events, but I assume you know how to do that  

Thanks a lot !!!