如何让字形图标在悬停在 <td>？

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

在名称和图标类中添加一个类，使它们具有相同的行

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