jquery - 更改mouseenter / mouseleave jquery上每个div的可见性

Question

我查看了 jquery 网站上的所有文档，还搜索了与我的问题相关的所有问题，但我没有找到解决方案。我想要做的是，当您将鼠标悬停在post课堂上时，使链接在post span a鼠标明显离开时出现并消失...现在，唯一发生的事情是，当我将鼠标悬停在一个在这些post类中，每个 div 都会出现链接，但我不希望这样，我只希望它像 twitter 帖子上发生的那样，例如，当悬停帖子时，回复、转发、收藏和更多链接出现。我想要那样的。

$(function(){
  $.each(function(){
    $(".post").mouseenter(function(){
        $(".post span a").css("visibility", "visible");
    });
  });
  $.each(function(){
    $(".post").mouseleave(function(){
        $(".post span a").css("visibility", "hidden");
    });
  });
});

编辑：很抱歉没有发布 HTML，这里是

  <div class="post">

                <span>
                    <a href="<?php echo base_url() . '/discussion/edit/' . $post['pid'];?>" class="post-edit" id="<?php echo $post['pid'];?>">edit</a>
                    &nbsp;
                    <a href="<?php echo base_url('discussion/delete/' . $post['pid']); ?>">delete</a>
                </span>
                </div>

Answer 1

我建议：

$('.post').hover(function(){
    $(this).find('a').css('visibility','visible');
},
function(){
    $(this).find('a').css('visibility','hidden');
});

Answer 2

为什么不直接使用 CSS？

.post span a {
    visibility: hidden;
}

.post:hover span a {
    visibility: visible;
}

Answer 3

试试这个：

$(function(){
  $('.post').each(function(index, element) {
    $(element).mouseenter(function() {
      $(element).find('span a').show();
    }).mouseleave(function() {
      $(element).find('span a').hide();
    });
  });
});