Question

45

Delete button on hover event

rated 0 times [ 48] [ 3] / answers: 1 / hits: 19080 / 12 Years ago, tue, july 17, 2012, 12:00:00

I'm having real problem with a hoverIntent.

http://jsfiddle.net/5fwqL/

What I want:

When hovering over the text for about 500ms I want the deletetext to show.

If I press the deletebutton i want the text to be deleted

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

samaraanandah

Add To Favorites

Follow

Total Points: 94

Total Questions: 86

Total Answers: 99

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

answered 12 Years ago briannar · Accepted Answer

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