代码之家 › 专栏 › 技术社区 › sreepurna

如何在鼠标上方显示按钮?

twitter-bootstrap css html jquery javascript

sreepurna · 技术社区 · 8 年前

我有一个主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>

现在,在child div的上方,我想显示按钮btn trash,点击该按钮,我想删除child 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();
});

9 回复 | 直到 8 年前

Ehsan 8 年前

试试这个:

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

Sree 8 年前

使用鼠标盖&老鼠屎。。试试这个

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

m.qayyum 8 年前

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

试试这把小提琴 https://jsfiddle.net/4abq9rg5/

Piyush Verma 8 年前

$(".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将被删除。

Silu K 8 年前

$(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。

temo 8 年前

选择器有问题:

#recentList.list-group-item

你需要在两者之间增加空间 #recentList 和 .list-group-item 或者加上比在他们之间叹息。

或者你可以直接移除 #近期名单 坚持 .列出组项 只有

经过测试,效果良好。

#最近的名单。列表组项目 (没有比标志更大的空间或格栅) 意味着选择具有 身份证件 recentList 和班 list-group-item 在一起

Sridhar 8 年前

这个问题有很多答案。我通常通过控制 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");
});

});

Deepak 8 年前

你只是在#最近名单和。列表组项目

$(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/

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