jquery - Twitter bootstrap buttons appearing on hover over the table row

Question

I have a twitter bootstrap table with a button group in the last cell of each row.

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 html layout I use http://jsfiddle.net/hDafj/

And this is what I tried to do already 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

Well, I think that anyway you need some additional styles here. I've added .btn-group-hover class to make the buttons' borders, shadow and background white (this way they will always be the same size). All .icon-white icons 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 tr background.

Answer 3

试试这个http://jsfiddle.net/guyisra/hDafj/5/这可能会帮助你开始（需要修复对齐，你可以自己解决

使用js为行悬停添加类和css

$(".btn-group a").hover(function () {
    $(this).addClass("btn");
}, function () {
    $(this).removeClass("btn");
}

);

css

.btn-group {
    visibility:hidden;
}
table tr:hover .btn-group {
    visibility:visible;
}