html - 如何在不移动内容位置的情况下将图标放置在 a 中？

Question

我有一个包含一些表格数据的表格：

当我将鼠标悬停在该行上时，它会在名称旁边显示一个放大镜。

这种方法的问题是内容（安德森）向右移动，因此相邻的 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;
}

我总是可以只引入一个tdfor 图标来确保其在表格中的固定位置，但我想知道是否有更好的方法来做到这一点。谢谢

Answer 1

采用

visibility: hidden;

代替

display: none;

这将为您的图像元素保留所需的空间并避免其他元素的跳跃。

Answer 2

用这个改变 CSS 属性：

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

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

Visibility 属性隐藏元素，但不隐藏它所占据的空间。

Answer 3

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}

演示