title: Hover state is maintained during a transition even if the element has gone
body: <p>Consider a simple element, and its associated CSS:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="content"&gt;Hover me !&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#content {
      width: 100px;
      height: 100px;
  }
  
  #content:hover {
      transform: translateY(500px);
      transition: transform 1s 500ms;
  }
  </code></pre>
  
  <p><kbd><a href="http://jsfiddle.net/Blackhole/U44Zf/" rel="nofollow noreferrer">JSFiddle</a></kbd></p>
  
  <p>The principle is straightforward: while the element is hovered, it must go down. The problem is, when <strong>the mouse doesn't move</strong>, that the <code>:hover</code> 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.</p>
  
  <p><img src="https://i.stack.imgur.com/FTUXk.png" alt="Illustration of the problem"><br />
  <em>Notice the cursor (a pointer) and its relative position with the element!</em></p>
  
  <p>That's a real problem when a JavaScript function must be executed only if the mouse is on an element, after a <code>timeout</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>// The mouseleave event will not be called during the transition,
  // unless the mouse move !
  
  element.on('mouseenter', executeAfterTimeout);
  element.on('mouseleave', cancelTimeout);
  </code></pre>
  
  <p>So here are my questions:</p>
  
  <ol>
  <li>Is this behaviour <em>normal</em> (compliant with the norms)?</li>
  <li>What are the solutions to avoid this problem?</li>
  </ol>
  
  <p><strong><em>Edit :</em></strong> 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 <code>transform</code>-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?</p>