如何在鼠標懸停時顯示按鈕？

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> 

Answer 2

使用mouseover和mouseout。

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

Answer 3

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

在小提琴上嘗試一下https://jsfiddle.net/4abq9rg5/

Answer 4

 $(".list-group-item").mouseover(function(){ $(this).children(".btn-trash").show(); }); $(".list-group-item").mouseout(function(){ $(this).children(".btn-trash").hide(); }); $(".btn-trash").click(function(){ $(this).closest('.list-group-item').remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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;"></button> <button class="btn glyphicon glyphicon-star btn-sm btn-star btn-default" style="float: right;"></button> <button class="btn btn-trash glyphicon glyphicon-trash btn-sm btn-trash btn-default" style="display: none;">trash</button> </div> <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 btn-trash glyphicon glyphicon-trash btn-sm btn-trash btn-default" style="display: none;">trash</button> </div> </div> 

您可以執行此操作，然后單擊垃圾箱按鈕，將刪除子div。

Answer 5

 $(document).on('mouseover', '.list-group-item', function() { //alert('mouse entered') $(this).find(".btn-trash").show(); }).on('mouseout',function(){ $(this).find(".btn-trash").hide(); }) $(document).on('click', '.btn-trash', function() { $(this).closest('.list-group-item').remove() }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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">1111111111111</a> <button class="btn glyphicon glyphicon-ok btn-sm btn-current btn-default" style="float: right;">Ok</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 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">22222222222222</a> <button class="btn glyphicon glyphicon-ok btn-sm btn-current btn-default" style="float: right;">Ok</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 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">333333333333333</a> <button class="btn glyphicon glyphicon-ok btn-sm btn-current btn-default" style="float: right;">Ok</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> 

如果您也有多個子div，這將起作用，因為您說過會有許多子div。

Answer 6

問題出在選擇器上：

#recentList.list-group-item

你需要之間添加空間#recentList和.list-group-item或添加磨碎機比他們之間的嘆息。

或者您可以刪除#recentList並僅使用.list-group-item 。

經過測試，工作正常。

#recentList.list-group-item （不帶空格或符號）表示選擇具有ID recentList list-group-item ID和類 list-group-item在一起的元素。

Answer 7

這個問題有很多答案。 我通常通過控制元素上的display CSS規則來做到這一點。 display: block ， display: none隱藏。

注意選擇器中的space 。 如果不留空格"#recentList.list-group-item" ，則"#recentList .list-group-item"解析選擇器，請改用"#recentList .list-group-item" 。

除了find您可以直接選擇class （即btn-trash ）。 如果它匹配多個元素，則必須使用ID而不是按類值進行選擇。

$(document).ready(function(){
$("#recentList .list-group-item").mouseenter(function(){
    console.log("mouse entered");
    $(".btn-trash").css("display","block");
});

$("#recentList .list-group-item").mouseleave(function(){
    console.log("mouse left");
    $(".btn-trash").css("display","none");
});

});

Answer 8

<button class="my-button">Click button</button>

.my-button{
  height:5px;
  width:10px
  background-color:fff;
  color:fff;
  margin:0;
  padding:0;
}

.my-button hover{
  background-color:red;
  color:green;
}

Answer 9

您只是在#recentList和.list-group-item之間缺少空格

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

並檢查以下URL： https : //jsfiddle.net/o2gxgz9r/47419/