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

We can do this with just CSS

CSS

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

Here is the updated fiddle

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.