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

Question

Consider a simple element, and its associated CSS:

<div id="content">Hover me !</div>

#content {
    width: 100px;
    height: 100px;
}

#content:hover {
    transform: translateY(500px);
    transition: transform 1s 500ms;
}

JSFiddle

The principle is straightforward: while the element is hovered, it must go down. The problem is, when the mouse doesn't move, that the :hover state is maintained even if the element is not physically below the mouse anymore (due to the translation). The state seems to be updated only after an mouse move.

Notice the cursor (a pointer) and its relative position with the element!

That's a real problem when a JavaScript function must be executed only if the mouse is on an element, after a timeout:

// The mouseleave event will not be called during the transition,
// unless the mouse move !

element.on('mouseenter', executeAfterTimeout);
element.on('mouseleave', cancelTimeout);

So here are my questions:

1. Is this behaviour normal (compliant with the norms)?
2. What are the solutions to avoid this problem?

Edit : To give you a context, here is what I want to do concretely: with JavaScript, I display a tooltip when the mouse is on an element (and hide it when the mouse leaves it). But the same element can be transform-ed when the user click on it. If the user simply clicks without moving the mouse, the tooltip will remain displayed, which is a real problem. How can I detect that the element is gone?

Answer 1

Part 1 of your question:

The principle is straightforward: while the element is hovered, it must go down. The problem is, when the mouse doesn't move, that the :hover state is maintained even if the element is not physically below the mouse anymore (due to the translation). The state seems to be updated only after an mouse move.

So here are my questions:

1. Is this behaviour normal (compliant with the norms)?

Yes. This behaviour is normal. Although not specified verbatim in the standards, it is mentioned in detail here: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105

Take this fiddle as reference: http://jsfiddle.net/Blackhole/h7tb9/3/

The upper div has mouse-events bound to it directly. The lower div has mouse-event bound to its parent. Pick up the lower one. Move the mouse slowly at one edge and watch the console to see what happens.

1. You touch the edge and mouseover and mouseenter are fired in quick succession (hover).
2. As a result the inner div translates.
3. Do nothing. No event is fired and so nothing happens.
4. Move the mouse inside the outer div. mousemove fires and the inner div is still translated.
5. Slowly move the mouse out. mouseout and mouseleave are fired in quick succession and the inner div translates back to its original position.

This is described here: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-mouseevents under the section Mouse Event Order.

Step 3 above is important. Because you are doing nothing, no event is fired and hence nothing happens. If the inner div were to bounce back to its original position in this step, then it would mean that an activation happened without any event!

This is in line with the definition of event as the document in this section: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#glossary-event says:

An event is the representation of some occurrence (such as a mouse click on the presentation of an element, the removal of child node from an element, or any number of other possibilities) which is associated with its event target. Each event is an instantiation of one specific event type.

Now have a look at the document here: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#event-flow, just before the section 3.2 starts, it says:

After an event completes all the phases of its propagation path, its Event.currentTarget must be set to null and the Event.eventPhase must be set to 0 (NONE). All other attributes of the Event (or interface derived from Event) are unchanged (including the Event.target attribute, which must continue to reference the event target).

The last line (in parentheses) is important. The event.target continues to reference the event target even after the event completes.

Now pick the upper div in the fiddle for reference. On mouseenter the div itself is translated. It does not matter if it moves away from below the mouse pointer. The event.target is still referencing to it and if no other mouse event occurs, nothing happens and it remains translated. The moment you move your mouse (anywhere in or out), the activation occurs on the event.target (which is still this div) and now the user-agent finds that the mouse pointer is no longer over the element and immediately mouseout and mouseleave events fire (after firing mousemove of course) causing the div to translate back.

Part 2 of your question:

2.What are the solutions to avoid this problem?

Edit : To give you a context, here is what I want to do concretely: with JavaScript, I display a tooltip when the mouse is on an element (and hide it when the mouse leaves it). But the same element can be transform-ed when the user click on it. If the user simply clicks without moving the mouse, the tooltip will remain displayed, which is a real problem. How can I detect that the element is gone?

If you look at the implementation in the lower div in this fiddle: http://jsfiddle.net/abhitalks/h7tb9/2/ ; as compared to the upper div, there is no flutter/jitter when mousing over. This is because rather than the div itself, the events are being handled on the parent.

So, that could be one solution for your use case.

See this demo: http://jsfiddle.net/Blackhole/nR8t9/9/

This addresses your edit. Tooltip gets displayed on mouseover. Tooltip gets hidden on mouseleave. The same element can be transform-ed when you click. If you simply click without moving the mouse, the tooltip hides.

Here, if you click, the element is being translated and then no further hover action would happen. The tooltip itself is implemented using a :before pseudo-element. This separates out the tooltip and the element which you want to change after click. You still handle events on the element itself. No need for timeout as it is handled by the css itself. If you mouseout, the tooltip will hide after a delay.

Hope that helps.