title: Jquery .on("mouseenter") - wait 2 seconds then do action
body: <p>I have a script that shows hidden text when you hover over a div. But I want it to be delayed 2 seconds, and if the user moves the mouse away before 2 seconds I want nothing to be shown.</p>
  
  <p>How do I do this?</p>
  
  <p><strong>What I have:</strong> <a href="http://jsfiddle.net/ZhrJT/" rel="noreferrer">http://jsfiddle.net/ZhrJT/</a></p>
  
  <p>-</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div&gt;hover this&lt;/div&gt;
      &lt;p class="hidden"&gt;unhidden!!&lt;/p&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$("body").on("mouseenter", "div", function(){
      $("p").removeClass("hidden");
  }).on("mouseleave", "div", function(){
      $("p").addClass("hidden");
  });
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>div {
      background-color:red;
      height:100px;
  }
  
  p.hidden {
      display:none;  
  }
  
  p {
      background-color:yellow; 
      height:100px;   
  }
  </code></pre>