Twitter bootstrap buttons that appear when you hover over a table row

Question

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

I want these buttons to appear only when the user hangs over a line. In addition, when the user hovers over the line (not over the group of buttons), only icons should appear, and when he hovers over the buttons of the group, the icons should appear as buttons.

Here is the fiddle with html layout I am using http://jsfiddle.net/hDafj/

And this is what I tried to do already http://jsfiddle.net/hDafj/2

Answer 1

Well, I think that in any case you need additional styles. I added the .btn-group-hover class to make the borders of the buttons, shadow and background white (so they will always be the same size). All .icon-white icons should also be handled separately to avoid white on a white background when you hover over a line. Here is my suggested solution: http://jsfiddle.net/hDafj/3/ But the only problem here is that it looks good only on a white background tr .

Answer 2

We can only do this with 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 3

try http://jsfiddle.net/guyisra/hDafj/5/ , which can help you get started (you need to fix the alignment, which you can use yourself

use js to add class and css to freeze strings

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

CSS

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