title: Delete button on hover event
body: <p>I'm having real problem with a hoverIntent. </p>
  
  <p><a href="http://jsfiddle.net/5fwqL/" rel="noreferrer">http://jsfiddle.net/5fwqL/</a></p>
  
  <p>What I want:</p>
  
  <ol>
  <li>When hovering over the text for about <strong>500ms</strong> I want the deletetext to show.</li>
  <li>If I press the deletebutton i want the text to be deleted</li>
  <li>If I go out of the text without pressing deletetext I want it to hide()</li>
  </ol>
  
  <p>javascript</p>
  
  <pre><code>$(document).on({
  mouseenter: function () {
      mouse_is_inside = true;
      $(this).next().slideDown();            
  },
  
  mouseleave: function () {
      mouse_is_inside = false;
      $(this).next().hide();   
  }
  }, '.title');
  
  $('.deleteLink').on('click', function() {
     $(this).prev().remove();         
  });
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div&gt;
     &lt;div class='title'&gt;TitleText&lt;/div&gt;
     &lt;div class='delete'&gt;&lt;a class='deleteLink' href="#"&gt;delete...&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>** Forgot to mention that It has to work in IE8, so I have to use old style! **</p>