javascript - jQuery 在悬停时显示/隐藏特定 <li></li> 中的 div

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

• .hover()
• .toggle()