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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用鼠标悬停＆amp; 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之间添加空格或者在它们之间添加 grater而不是叹息。

或者您可以删除#recentList并仅使用.list-group-item。

经过测试并且工作正常。

#recentList.list-group-item（没有空格或比标志更重要）表示选择 Id recentList和 Class list-group-item的元素。

Answer 7

这个问题的答案很多。我通常通过控制元素上的display css规则来做到这一点。要显示display: block，display: none将隐藏。

请注意选择器中的space。如果您没有留出空格"#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();
});

并检入此网址：https://jsfiddle.net/o2gxgz9r/47419/

如何在鼠标上显示按钮？

9 个答案: