我有一个twitter引导表，每行的最后一个单元格中有一个按钮组。 我希望这些按钮仅在用户悬停在行上时出现。并且需要分别单击编辑和删除图标。
我有以下脚本 HTML
BCSS
<div class="nesting">
<a href="#" class="foo-class nesting-item"><span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <span class="pencil glyphicon glyphicon-pencil"></span></a>
<div class="nestchild">
<a href="#" class="nesting-item"><span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar<span class="pencil glyphicon glyphicon-pencil"></span></a>
<a href="#" class="nesting-item"><span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link<span class="pencil glyphicon glyphicon-pencil"></span></a>
</div>
</div>
Javascript角
.foo-class { float:left; padding : 3px; width:300px; min-width:300px; }
.nesting span.pencil { float:right; }
.nestchild a { clear: both;display : block; }
.nesting { background-color:#ccc; width:300px;}
.nesting a {width:285px;}
.nesting a .pencil {display : none; }
.nestchild { margin-left : 15px; }
参见此演示
https://jsfiddle.net/lilan2/a82jzucc/
如何正确开发
答案 0 :(得分：1)
相反，您可以使用jquery更新鼠标上的表格行中的编辑和删除按钮以显示编辑删除按钮
$(document).ready(function() {
// show buttons on tr mouseover
$(".hover tr").live("mouseenter", function() {
$(this).find("td:last-child").html('<a href="javascript:void(0);" onClick="editrow(' + $(this).attr("id") + ')">Edit</a> <a href="javascript:void(0);" onClick="deleterow(' + $(this).attr("id") + ')">Delete</a>');
}); //
// remove button on tr mouseleave
$(".hover tr").live("mouseleave", function() {
$(this).find("td:last-child").html(" ");
});
// TD click event
$(".hover tr").live("click", function(event) {
if (event.target.nodeName == "TD") {
alert("You can track TD click event too....Isnt it amazing !!!");
}
});
});
editrow = function(itemId) {
alert("You clicked 'Edit' link with row id :" + itemId);
}
deleterow = function(itemId) {
alert("You clicked 'Delete' link with row id :" + itemId);
}table {
font-family: verdana;
font-size: 12px;
}
table th {
text-align: left;
background: #D3D3D3;
padding: 2px;
}
table tr:hover {
background: #EFEFEF;
}
table tr {
text-align: left;
}
table td {
padding: 5px;
}
table td a {
color: #0454B5;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<body>
<table width="40%" border="0" class="hover">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th width="20%">Action</th>
</th>
<tr id="100">
<td>droid</td>
<td>Andro</td>
<td></td>
</tr>
<tr id="101">
<td>droid</td>
<td>Andro</td>
<td></td>
</tr>
<tr id="102">
<td>droid</td>
<td>Andro</td>
<td></td>
</tr>
<tr id="103">
<td>droid</td>
<td>Andro</td>
<td></td>
</tr>
<tr id="104">
<td>droid</td>
<td>Andro</td>
<td></td>
</tr>
<tr id="105">
<td>droid</td>
<td>Andro</td>
<td></td>
</tr>
</table>
</body>
请参阅更新的小提琴https://jsfiddle.net/VaibhavD/6aehaxr6/2/embedded/result/
答案 1 :(得分：0)
我不知道我是否理解你想要的东西，但看看这个小提琴。
您可以在文档就绪或css上隐藏铅笔链接，然后隐藏显示nesting类链接的类hover fire pencil事件的div。在mouseleave事件
隐藏pencil类链接。
然后在pencil class div。{/ p>中的nesting类上插入点击事件
PS：我的代码中没有找到任何删除按钮，但是点击pencil类时插入的内容相同。
如果您只想显示与行悬停相对应的铅笔图标，则可以在div nesting类
$(document).ready(function(){
$('.nesting a .pencil').hide();
$('div.nesting a').each(function(){
$(this).hover(function(){
$(this).find('.pencil').show();
}).mouseleave(function(){
$(this).find('.pencil').hide();
});
})
$('div.nesting .pencil').click(function(){
alert("You have clicked on pencil");
})
});.foo-class { float:left; padding : 3px; width:300px; min-width:300px; }
.nesting span.pencil { float:right; }
.nestchild a { clear: both;display : block; }
.nesting { background-color:#ccc; width:300px;}
.nesting a {width:285px;}
.nestchild { margin-left : 15px; }<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nesting">
<a href="#" class="foo-class nesting-item"><span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <span class="pencil glyphicon glyphicon-pencil"></span></a>
<div class="nestchild">
<a href="#" class="nesting-item"><span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar<span class="pencil glyphicon glyphicon-pencil"></span></a>
<a href="#" class="nesting-item"><span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link<span class="pencil glyphicon glyphicon-pencil"></span></a>
</div>
</div>
答案 2 :(得分：0)
您的案例不需要jQuery脚本。你可以用css做到这一点。
只需在css中添加:hover样式
function editItem() {
alert("Edit icon clicked");
}.foo-class {
float: left;
padding: 3px;
width: 300px;
min-width: 300px;
}
.nesting span.pencil {
float: right;
}
.nestchild a {
clear: both;
display: block;
}
.nesting {
background-color: #ccc;
width: 300px;
}
.nesting a {
width: 285px;
}
a.nesting-item .pencil {
display: none;
}
a.nesting-item:hover .pencil {
display: block;
}
.nestchild {
margin-left: 15px;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="nesting">
<a href="#" class="foo-class nesting-item"><span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <span class="pencil glyphicon glyphicon-pencil"></span></a>
<div class="nestchild">
<a href="#" class="nesting-item"><span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar<span class="pencil glyphicon glyphicon-pencil" onclick="editItem()"></span></a>
<a href="#" class="nesting-item"><span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link<span class="pencil glyphicon glyphicon-pencil" onclick="editItem()"></span></a>
</div>
</div>