如何在鼠标悬停时显示按钮？答案

【问题标题】：How do you display a button on mouse over?如何在鼠标悬停时显示按钮？
【发布时间】：2018-05-23 18:49:14
【问题描述】：

我有一个内部由许多子 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();
});

【问题讨论】：

您只是在#recentList 和.list-group-item 之间缺少一个空格，因为.list-group-item 是#recentList 的孩子。

标签： javascript jquery html css twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案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();
});

【讨论】：

【解决方案3】：

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

在小提琴上试试这个 https://jsfiddle.net/4abq9rg5/

【讨论】：

【解决方案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 将被删除。

【讨论】：

【解决方案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。

【讨论】：

【解决方案6】：

问题出在选择器上：

#recentList.list-group-item

您需要在#recentList 和.list-group-item 之间添加空格或在它们之间添加 grater than 叹息。

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

测试并运行良好。

#recentList.list-group-item（没有空格或大于号）表示选择同时具有 Id recentList 和 Class list-group-item 的元素。

【讨论】：

【解决方案7】：

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

注意选择器中的space。如果不留空格"#recentList.list-group-item"，则选择器未解析，请改用"#recentList .list-group-item"。

您可以直接选择class（即btn-trash），而不是find。如果匹配多个元素，则必须使用 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");
});

});

【讨论】：

【解决方案8】：

您只是在 #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】：

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

【讨论】：