I'm having real problem with a hoverIntent.

/

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

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

• javascript
• jquery

• 2 Fiddles are fine, but please try to include pertinent code in the question - helpers shouldn't have to click out just to get a feel for the question. – Mitya Commented Jul 17, 2012 at 12:33
• 1 Can you also explicitly state what the problem is? see updated fiddle @ jsfiddle.net/5fwqL/1 – Anirudh Ramanathan Commented Jul 17, 2012 at 12:43
• @DarkXphenomenon I can't press the "deleteText", and I can't get the delay to work – Plexus81 Commented Jul 17, 2012 at 12:45

2 Answers 2

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

$(document).ready(function() {        
    $(".title").hover(
        function() {
            $(this).data("mouse_hover", true);
            var self = $(this);
            setTimeout(function() {
                if (self.data("mouse_hover") === true) {
                    self.next(".deleteLink").show();
                }
            }, 500);
        },   
        function() {
            $(this).data("mouse_hover", false).next(".delete").hide();
        }        
    );
    $(".deleteLink").click(function(e) {
        e.preventDefault();
        $(this).text("deleted").prev(".title").slideUp(function() {
            $(this).hide();   
        });
    });
});    ​