javascript - jQuery 显示/隐藏特定的 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
        }
    });

• 。徘徊（）
• .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();