0

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

在此处输入图像描述

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

在此处输入图像描述

这种方法的问题是内容（安德森）向右移动，因此相邻的 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 图标来确保其在表格中的固定位置，但我想知道是否有更好的方法来做到这一点。谢谢

4

3 回答 3

1

采用

visibility: hidden;

代替

display: none;

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

于 2012-12-04T10:45:19.387 回答
1

用这个改变 CSS 属性：

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

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

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

于 2012-12-04T10:47:27.640 回答
0

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}

演示

于 2012-12-04T10:46:29.480 回答