Javascript jQuery显示/隐藏特定中的div<；李></李>；悬停时

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

在每个

上，都有一个与项目匹配的小删除按钮

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

以下是我目前掌握的情况：

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

但这行不通

有什么想法吗？

使用上下文选择器

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

或

更改：

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

到

或

试试这个：

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

Pehaps使用CSS

.delete_update
{
    display:none;
}

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

看这把小提琴：

---

当然，您不会得到jquery的奇特转换，但是您可以在现代浏览器中使用CSS转换来实现同样的功能
确保预先隐藏所有按钮。对于开箱即用的解决方案，使用css或.hide（）+1.）在OPs代码中看到jquery时，所有人都在考虑jquery行。。

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

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

.delete_update
{
    display:none;
}

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