CSS：表列轉變爲圖標切換懸停知名度

這裏是plunker - http://plnkr.co/edit/iwvjJcUurUW2AvkDArfz?p=preview CSS：表列轉變爲圖標切換懸停知名度

的問題是，當我將鼠標懸停在每行，列向左移動，這是不可取的。

我想要的圖標出現和消失鼠標懸停但表中的列不改變他們的立場

我怎樣才能做到這一點？

謝謝

來源

2013-05-15 daydreamer

你的HTML元素的空間是無效的，雖然 – diEcho

@diEcho，請詳細說明，我不明白的地方是無效的 – daydreamer

'thead'標籤必須在'tbody'之前關閉 – diEcho

只是解決你的CSS： -

tr i.icon-minus-sign {visibility: hidden;} 
tr:hover i.icon-minus-sign {visibility: visible;}

問題是你有最初沒有任何元素的列，因爲它是display:none因此您的其他單元擴展佔用空間。當你將鼠標懸停在元素佔用空間上時，縮小的td就會展開。爲了避免這種情況最好的辦法是使用visibility這需要即使隱藏不像display財產

來源

2013-05-15 04:47:29 PSL

什麼時間，發佈這個問題後，我正在嘗試同樣的事情，得到它的工作，更新了答案，看到你的帖子:)，謝謝@PSL反正作出快速回應 – daydreamer

剛剛看到你的問題，並立即意識到它必須顯示v/s可見性問題.. :) – PSL

@daydreamer：你也可以修復這個問題只能通過寫v alid HTML。 :) – diEcho

增加一個th和

<th>&nbsp;</th>

提示：分配寬度的所有列，並也靠近</thead>

<table class="table table-hover" style="width:100%"> 
    <thead> 
    <tr> 
     <th style="width:60%" >Name</th> 
     <th style="width:30%">Amount</th> 
     <th style="width:10%">&nbsp;</th> 
    </tr> 
    </thead>

Working Fiddle

來源

2013-05-15 04:45:25 diEcho

我這這裏是解決方案解決th的width，也可以添加一個空白th

<th width="100px">Name</th> 
<th width="300px">Amount</th> 
<th width="100px">&nbsp;</th>

，你可以根據你的需要，這將有助於你修改的寬度。

來源

2013-05-15 04:45:55

我剛剛纔用CSS visibility財產

在這裏工作是更新plunker - http://plnkr.co/edit/iwvjJcUurUW2AvkDArfz?p=preview

這是所有做我的CSS

tr i.icon-minus-sign {visibility: hidden;} 
tr:hover i.icon-minus-sign {visibility: visible;}

來源

2013-05-15 04:47:26 daydreamer

CSS：表列轉變爲圖標切換懸停知名度

回答

相關問題