javascript - 如何在鼠标悬停时显示按钮？

Question

我有一个主 div，它内部包含许多子 div。

这是我正在使用的代码:

<div class="list-group" id="recentList">
    <div class="list-group-item" style="border-left: none; border-right: none;">
        <img class="a-img" src="./img/desktop.png" height="25" width="25">
        <a class="a-file">a.pdf</a>
        <button class="btn glyphicon glyphicon-ok btn-sm btn-current btn-default" style="float: right;"></button>
        <button class="btn glyphicon glyphicon-star btn-sm btn-star btn-default" style="float: right;"></button>
        <button class="btn glyphicon glyphicon-trash btn-sm btn-trash btn-default" style="display: none;"></button>
    </div>
    ....
</div>

现在，当鼠标悬停在子 div 上时，我想显示 btn-trash 按钮，然后单击该按钮我想删除子 div。

我试过这样的事情。但它不起作用!!!

$(document).on('mouseenter', '#recentList.list-group-item', function() {
  //alert('mouse entered')
  $(this).find(".btn-trash").show();
})
$(document).on('mouseleave', '#recentList.list-group-item', function () {
  alert('mouse left')
    $(this).find(".btn-trash").hide();
});

Answer 1

试试这个:

$(document).ready(function(){
  $("#recentList").hover(function(){
    $('.btn-trash',this).show();
  },function(){$('.btn-trash',this).hide();})
})

$(document).ready(function(){
  $("#recentList").hover(function(){
    $('.btn-trash',this).show();
  },function(){$('.btn-trash',this).hide();})
})

.list-group { border:2px solid orange;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="list-group" id="recentList">
  <div class="list-group-item" style="border-left: none; border-right: none;">
    <img class="a-img" src="./img/desktop.png" height="25" width="25">
    <a class="a-file">a.pdf</a>
    <button class="btn glyphicon glyphicon-ok btn-sm btn-current btn-default" style="float: right;">current</button>
    <button class="btn glyphicon glyphicon-star btn-sm btn-star btn-default" style="float: right;">star</button>
    <button class="btn glyphicon glyphicon-trash btn-sm btn-trash btn-default" style="display: none;">trash</button>
  </div>
</div>