0

I have a page displaying a list and users can add and delete items to it.

On each <li></li>, there is a small delete button matching the item.

Right now, the delete buttons only show when the users hover the list. What i'm trying to do is to only show one delete button at a time when the user hovers on specific item.

Here's what i have so far:

$(document).ready(function() {
    $(".delete_update").hide(); 
    $('.cell').hover(function(){
        $(".delete_update").show();

        $('.cell').mouseout(function(){
            $(".delete_update").hide();
        });
    });
});


<li class="cell" id="post<?php echo $postid ?>">
    <div id="update<?php echo $postid ?>">
        <?php echo $post ?>
    </div>
    <div id="eraser<?php echo $postid ?>">
        <a href="#" id="<?php echo $postid ?>" class="delete_update">Delete !</a>
    </div>
</li>

I tried to add a variable to the jQuery to contain the "id" of each cell, sth like :

var element = $(this);
var I = element.attr("id");
$('.cell' + I).hover(function() {
    $(".delete_update").show();
});

but this wouldn't work.

Any ideas?

4 Answers 4

3

Try this:

$(function(){
    $('.cell').hover(function(){ //Hover takes 2 callbacks one for mouseenter and one for mouseleave
          $(this).find('.delete_update').show(); //show the button which is inside the current li hovered
    },
     function(){
         $(this).find('.delete_update').hide(); //hide the button which is inside the current li hovered

     });
});

Or just use toggle

 $(function(){
        $('.cell').hover(function(){ // Same callback will be executed if only one is mentioned,  on mouseeneter and mouse leave
              $(this).find('.delete_update').toggle(); //toggle the button visibility which is inside the current li hovered
        }
    });
1
  • Make sure you hide all your buttons upfront. using css or using .hide()
    – PSL
    Jun 19, 2013 at 4:09
3

Pehaps use CSS!

.delete_update
{
    display:none;
}

.cell:hover .delete_update
{
    display:block;
}

see this fiddle: http://jsfiddle.net/htqkt/1/

Of course you dont get the fancy trasitioning of jquery, but you coulld use CSS transition to achieve the same thing in Modern browsers

1
  • +1 for an out-of-the box solution.. :) Seeing jquery in OPs code all were thinking on jquery lines..
    – PSL
    Jun 19, 2013 at 4:10
2

use context selector

$(document).ready(function(){
    $(".delete_update").hide(); 
    $('.cell').hover(function(){
        $(".delete_update", this).show();
    }, function(){
        $(".delete_update", this).hide();
    });
});

or

$(document).ready(function(){
    $(".delete_update").hide(); 
    $('.cell').hover(function(){
        $(".delete_update", this).toggle();
    });
});
1

Change:

$(".delete_update").show();

to

$(this).find(".delete_update").show();

or

$(".delete_update",this).show();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.