Question

我有一个包含数据的表，我希望用户能够每行删除。但是为了不使用垃圾桶弄乱我的UI，我希望垃圾桶只在悬停在记录上时才会出现。我正在使用Bootstrap和jQuery，但我很难做到这一点。

我到目前为止（$("#properties")是我的tbody）：

function add_property(prop) {
    var r = Math.floor(Math.random() * 1000000);

    $("#properties").append("<tr>"+
        '<td id="td'+r+'" class="property"><div class="col-sm-11">' + prop + 
        '</div><div  class="col-sm-1"><span id="div'+r+'" class="glyphicon glyphicon-trash" style="display:none"></div></td>' +
        '<td><input type="text" name="'+prop+'"></td>'+
    "</tr>");

    $("#td"+r).hover(function() {
        $("#div"+r).css("display", "inline");
    }, function() {
        $("#div"+r).css("display", "none");
    });
}

我使用随机数，因为记录是动态创建的。

目前，当我将鼠标悬停在<td>上时，一切都在跳动。

更新当然我希望能够点击垃圾桶来删除记录。

Answer 1

你可以使用没有任何javascript的css：

<div class="col-sm-1"><span id="div'+r+'" class="glyphicon glyphicon-trash"></div>

CSS：

#properties div .glyphicon.glyphicon-trash {
    display: none;
}
#properties td:hover div .glyphicon.glyphicon-trash {
    display: inline;
}

Answer 2

在name和icon类中添加一个类，使它们成为同一行

.inline { 显示：内联块; }

并在悬停div id

时隐藏/显示隐藏/可见

吼叫一个工作片段

function add_property(prop) {
    var r = Math.floor(Math.random() * 1000000);

    $("#properties").append("<tr>"+
        '<td id="td'+r+'" class="property"><div class="col-sm-11 inline">' + prop + 
        '</div><div  class="col-sm-1 inline"><span id="div'+r+'" class="glyphicon glyphicon-trash" style="visibility:hidden"></div></td>' +
        '<td><input type="text" name="'+prop+'"></td>'+
    "</tr>");

    $("#td"+r).hover(function() {
        $("#div"+r).css("visibility", "visible");
    }, function() {
        $("#div"+r).css("visibility", "hidden");
    });
}

$("#btn").on("click",function(e){
  var r = Math.floor(Math.random() * 1000000);
  add_property("name"+r); 
});

.inline {
  display: inline-block;
}

.glyphicon-trash:hover{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<button id="btn">add</button>
<table id="properties">

</table>

如何将鼠标悬停在一个？

2 个答案: