出现在桌面行上方的Twitter引导按钮

Question

我有一个twitter bootstrap表,每行的最后一个单元格中有一个按钮组.

我希望这些按钮仅在用户悬停在行上时出现.此外,当用户将鼠标悬停在行上时(不在按钮组本身上方),只会出现图标,当他将鼠标悬停在按钮组上时,图标应显示为按钮.

这是html我使用http://jsfiddle.net/hDafj/布局的小提琴

这就是我试图做的事情http://jsfiddle.net/hDafj/2

Answer 1

我们可以做到这一点 CSS

CSS

table.table tr td div.btn-group { display:none;}
table.table tr:hover td div.btn-group { display:inline-block;}

这是更新的小提琴

Answer 2

好吧，我认为无论如何你都需要一些额外的样式。我添加了.btn-group-hover类来使按钮的边框、阴影和背景变成白色（这样它们将始终具有相同的大小）。所有.icon-white图标也应单独处理，以避免它们在行悬停时在白色背景上显示为白色。这是我建议的解决方案：http://jsfiddle.net/hDafj/3/但这里唯一的问题是它仅在白色tr背景上看起来不错。