Hover state is maintained during a transition even if the element has gone

Question

Consider a simple element, and its associated CSS:

Hover me !

Answer 1

This behavior is normal to prevent the element from bouncing under the cursor. Imagine the transition would revert as soon as the element is away from the cursor. As soon as the cursor has left the element, it would go back, so the cursor is again above the element and it moves down. This way it would bounce up and down at the edge of the cursor.

One solution would be to implement the transition with JavaScript instead of CSS, then the element will "bounce". But is this really the desired behavior? What exactly are you trying to do?