Nút khởi động Twitter xuất hiện trên di chuột qua hàng của bảng

Question

Tôi có bảng khởi động twitter với một nhóm nút trong ô cuối cùng của mỗi hàng.

Tôi muốn các nút này chỉ xuất hiện khi người dùng di chuột qua hàng. Ngoài ra, khi người dùng di chuột qua hàng (không phải chính nhóm nút), chỉ các biểu tượng mới xuất hiện và khi họ di chuyển qua các biểu tượng nhóm nút sẽ được hiển thị như nút.

Đây là một fiddle với html bố trí tôi sử dụng http://jsfiddle.net/hDafj/

Và đây là những gì tôi đã cố gắng để làm đã http://jsfiddle.net/hDafj/2

Answer 1

Vâng, tôi nghĩ rằng dù sao bạn cần một số phong cách khác ở đây. Tôi đã thêm .btn-group-hover lớp để làm cho các nút biên giới, bóng và nền trắng (theo cách này họ sẽ luôn luôn có cùng kích thước). Tất cả các biểu tượng .icon-white cũng nên được xử lý riêng để tránh chúng xuất hiện màu trắng trên nền trắng trên hàng di chuột. Đây là giải pháp được đề xuất của tôi: http://jsfiddle.net/hDafj/3/ Nhưng vấn đề duy nhất ở đây là nó trông tốt chỉ trên nền trắng tr.

Answer 2

Chúng ta có thể làm điều này với chỉ CSS

CSS

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

Đây là cập nhật fiddle

Answer 3

thử http://jsfiddle.net/guyisra/hDafj/5/ này mà có thể giúp bạn bắt đầu (cần phải sửa chữa các liên kết mà bạn có thể d tự js

sử dụng của bạn để thêm lớp và css cho dòng di chuột

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

); 

css

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