如何在不移動內容位置的情況下在中放置圖標？

enter image description here

當我用鼠標在排列懸停它顯示了我一個放大鏡玻璃旁邊的名稱。

enter image description here

這種方法的問題是內容（安德森）向右移動，因此鄰近的TD（名字）也被推向右側。這是令人討厭的，因爲一切都開始在右邊跳舞，然後在盤旋在行上時離開。

<td><i id="glass" class="icon-search icon-large"></i>Anderson</td> 
<td>Michael</td> 

.cb_table-hover tbody tr .icon-search{ 
    display: none; 
}  

.cb_table-hover tbody tr:hover .icon-search{ 
    display: inline-block; 
}

我試圖將圖標放置到左側，但它並沒有幫助的情況：

#glass{ 
    position:relative; 
    left: -10px; 
}

我隨時可以推出只是一個td的圖標，以確保在其固定位置表，但我想知道是否有更好的方法來做到這一點。由於

來源

2012-12-04 Houman

您可以將圖像添加爲懸停時的背景圖像。 – Kyle

更改CSS屬性與此：

.cb_table-hover tbody tr .icon-search{ 
    visibility: hidden; 
} 

.cb_table-hover tbody tr:hover .icon-search{ 
    visibility: visible; 
}

Visibility屬性隱藏元素，但並不能掩蓋的空間它佔據。

來源

2012-12-04 10:47:27 ilCrosta

使用

visibility: hidden;

，而不是

display: none;

這將保存所需的空間爲您的形象元素，並避免其他元素的跳躍。

來源

2012-12-04 10:45:19 cem

就是這樣。非常乾淨和容易。 – Houman

添加圖片作爲bg image懸停

td{padding: 4px 18px; border:grey 1px solid} 
td:hover{background:url(http://inotesapp.com/images/search_icon.png) left no-repeat; background-size:18px}

DEMO

來源

2012-12-04 10:46:29 Sowmya

如何在不移動內容位置的情況下在​​中放置圖標？

回答

相關問題

如何在不移動內容位置的情況下在中放置圖標？