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

My suggestion is to look at this problem another way: if an element is going to be transitioned when you click on it. Why not just execute your callback on click instead of mouseleave?

I am assuming the tooltip has some connection to the element you mouseenter, in which case mouseleave and click are effectively the same - they both cause mouse pointer to not be over the element anymore (regardless of how browser behaves).

PS: note that in your example, how mouseenter and mouseleave fire also depends on whether you set the transition as default property or as a :hover state property, since this looks like an area where browser vendors are free to optimize as they please, you should probably avoid they in the first place.

• http://jsfiddle.net/U44Zf/13/ - transition on #content:hover
• http://jsfiddle.net/U44Zf/14/ - transition on #content