jQuery Show / Hide div具体 <li></li> 悬停时

Question

我有一个显示列表的页面，用户可以向其中添加和删除项目。

在每个<li></li> ，都有一个与该项目匹配的小删除按钮。

现在，仅当用户将列表悬停时，删除按钮才会显示。 我想做的是，当用户将鼠标悬停在特定项目上时，仅显示一个删除按钮。

这是我到目前为止的内容：

$(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>

我试图将一个变量添加到jQuery以包含每个单元格的“ id”，例如：

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

但这行不通。

有任何想法吗？

Answer 1

尝试这个：

$(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

     });
});

或者只是使用切换

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

• 。徘徊（）
• .toggle（）

Answer 2

可能使用CSS！

.delete_update
{
    display:none;
}

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

看到这个小提琴： http : //jsfiddle.net/htqkt/1/

当然，您不会得到jquery的花哨过渡，但是您可以使用CSS过渡来实现现代浏览器中的相同功能

Answer 3

使用上下文选择器

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

要么

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

Answer 4

更改：

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

至

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

要么

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