Updating hover on tween

[Torben 0 Likes (Newbie)]

The red box in this example has a hover effect on the css.

See the Pen aHepz by anon (@anon) on CodePen

 

The thing is this only works if the mouse is moving on the red box; not when thw box itself moves under the mousepointer (leave the mouse in the path of the box).

This is probably not a Tweenlite issue but a js question.

 

How do I fix that?

 

 

[Jonathan 5,176 Likes (Superhero)]

Hello Torben, and Welecome to the GreenSock Forum!

 

I am not seeing any hover effect happening on your codepen example. Also I do not see any CSS :hover pseudo classes or any JavaScript hover events either.

 

Maybe you forgot to add it your codepen example?

 

[Chrysto 143 Likes (Specialist)]

I think this is what he ment:

 

See the Pen oljqA by bassta (@bassta) on CodePen

 

I added the :hover pseudo-class and also made the tween slower, so it is easier for testing. I comfirm the bug, but I think it has nothing to do with GSAP, it is a browser issue. 

[Torben 0 Likes (Newbie)]

Thank you Chrysto - don't know what happened to my Codepen.

And yes that is what I meant

[Chrysto 143 Likes (Specialist)]

Interesting bug, currently I can only test on Webkit browsers, on Mac OSX, but seems like with different tweening engines ( jQuery animate() for example ) , with different properties animated ( left, margin-left etc. ) this happens. 

[Jonathan 5,176 Likes (Superhero)]

I tested on PC - Windows 64-bit

• Firefox 30 - pseudo :hover does trigger
• IE11 - pseudo :hover does NOT trigger
• Chrome 35 - pseudo :hover does NOT trigger

[Torben 0 Likes (Newbie)]

There seems to be an agreement to this being a browser bug.

If anyone else finds this a need a fix there is a work around here:

http://stackoverflow.com/questions/24787618/hover-not-working-on-animated-div