twitter-bootstrap 将鼠标悬停在表格行上时出现的 Twitter 引导程序按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17339564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap buttons appearing on hover over the table row
提问by Devellar
I have a twitter bootstrap table with a button group in the last cell of each row.
我有一个 Twitter 引导表，每行的最后一个单元格中有一个按钮组。
I want these buttons appear only when user hovers over the row. Also, when user hovers over the row (not over the button group itself) only icons should appear, and when he then hovers over the button group icons should be displayed like buttons.
我希望这些按钮仅在用户悬停在行上时出现。此外，当用户将鼠标悬停在该行上（而不是按钮组本身上）时，只应显示图标，而当他将鼠标悬停在按钮组上时，图标应该像按钮一样显示。
Here is a fiddle with htmllayout I use http://jsfiddle.net/hDafj/
这是html我使用的布局小提琴http://jsfiddle.net/hDafj/
And this is what I tried to do already http://jsfiddle.net/hDafj/2
这就是我已经尝试做的http://jsfiddle.net/hDafj/2
采纳答案by Iurii.K
Well, I think that anyway you need some additional styles here. I've added .btn-group-hoverclass to make the buttons' borders, shadow and background white (this way they will always be the same size). All .icon-whiteicons also should be treated separately to avoid them appearing white on white background on row hover. Here is my suggested solution: http://jsfiddle.net/hDafj/3/But the only issue here is that it looks good only on white trbackground.
好吧，我认为无论如何你都需要一些额外的样式。我添加了.btn-group-hover类以使按钮的边框、阴影和背景为白色（这样它们将始终具有相同的大小）。所有.icon-white图标也应单独处理，以避免它们在行悬停时在白色背景上显示为白色。这是我建议的解决方案：http: //jsfiddle.net/hDafj/3/但这里唯一的问题是它只在白色tr背景下看起来不错。
回答by Praveen Gowda I V
回答by Nick Ginanto
try this http://jsfiddle.net/guyisra/hDafj/5/which might help you get started (need to fix the alignment, which you can d on your own
试试这个http://jsfiddle.net/guyisra/hDafj/5/这可能会帮助你开始（需要修复对齐，你可以自己做
use js to add class and css for the row hover
使用js为行悬停添加类和css
$(".btn-group a").hover(function () {
$(this).addClass("btn");
}, function () {
$(this).removeClass("btn");
}
);
css
css
.btn-group {
visibility:hidden;
}
table tr:hover .btn-group {
visibility:visible;
}
