Delete button on hover event

I'm having real problem with a hoverIntent.

http://jsfiddle.net/5fwqL/

What I want:

1. When hovering over the text for about 500ms I want the deletetext to show.
2. If I press the deletebutton i want the text to be deleted
3. If I go out of the text without pressing deletetext I want it to hide()

javascript

$(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();         
});

html

<div>
   <div class='title'>TitleText</div>
   <div class='delete'><a class='deleteLink' href="#">delete...</a></div>
</div>

** Forgot to mention that It has to work in IE8, so I have to use old style! **