Delete button on hover event

Question

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! **

Answer 1

Have a look at this fiddle http://jsfiddle.net/joevallender/42Tw8/

You can use CSS to handle showing and hiding the delete link. Say you nested your HTML like this

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

Then you can use CSS like this

.delete{
    color: red;
    display: none;
}
.title:hover .delete {
   display:block  
}

It's quite a common pattern for things like delete/edit links actually. The .title:hover .delete means the CSS the .delete will have when a parent .title is being hovered on. You could have also added an arbitrary class to your parent in your example and used that if you wanted to keep the same HTML arrangement.

Then use the JS below to handle the click

$(document).ready(function(){
    $('.delete').click(function(){
        $(this).parent().remove();
        return false;
    });
});

Does that make sense? It's slightly differently arranged to your starting point

EDIT

For the fade in/out I mentioned in the comment, you could use something like this

.delete{
    color: red;
    opacity:0;
    transition:opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -webkit-transition: opacity 0.5s linear;
}
.title:hover .delete {
   opacity: 1;
   transition:opacity 2s linear;
   -moz-transition: opacity 2s linear;
   -webkit-transition: opacity 2s linear;
}​

EDIT2

Changed the above code to use different transition times for fade in and fade out