將鼠標懸停在表格行上的Twitter引導按鈕

我在每行的最後一個單元格中有一個按鈕組的twitter引導表。將鼠標懸停在表格行上的Twitter引導按鈕

button group in a table cell

我想，只有當用戶將鼠標懸停在該行這些按鈕出現。另外，當用戶將鼠標懸停在行上時（不在按鈕組本身上），只會出現圖標，然後當鼠標懸停在按鈕組上時，圖標應該像按鈕一樣顯示。

enter image description here

這裏是html佈局的小提琴我用http://jsfiddle.net/hDafj/

而這正是我想已經做http://jsfiddle.net/hDafj/2

來源

2013-06-27 Devellar

哪來的代碼，你試過嗎？ – slash197

增加了一個鏈接到HTML佈局。 – Devellar

這只是標記，那你嘗試做？ – slash197

嗯，我覺得反正你需要一些額外的風格在這裏。我添加了.btn-group-hover類，使按鈕的邊框，陰影和背景變成白色（這樣它們的大小始終相同）。所有.icon-white圖標也應該分開處理以避免它們在行懸停的白色背景上顯示爲白色。這裏是我建議的解決方案：http://jsfiddle.net/hDafj/3/但這裏唯一的問題是，它只在白色tr背景上看起來很好。

來源

2013-06-27 10:06:39

看起來不錯！你認爲有可能使它只用CSS來工作嗎？ – Devellar

我認爲這是可能的，但在使用jQuery瀏覽器支持的情況下更好。 –

我們可以只用CSS

CSS這樣做

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

這裏是更新fiddle

來源

2013-06-27 09:46:52

感謝您的回答，但這不完全是我想要的。我希望它只在行懸停上顯示圖標**，並在按鈕組懸停上顯示按鈕。請看看我已經試過做什麼jsfiddle.net/hDafj/2 – Devellar

試試這個http://jsfiddle.net/guyisra/hDafj/5/這可能會幫助你開始（需要固定取向，你可以d對自己

用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; 
}

來源

2013-06-27 10:10:41

謝謝！你明白了。但按鈕在懸停時跳躍。我喜歡Iurii.K給出的解決方案。 – Devellar

將鼠標懸停在表格行上的Twitter引導按鈕

回答

相關問題