我有一个包含一些表格数据的表格:
当我将鼠标悬停在行上时,它会在名称旁边显示一个放大镜。
此方法的问题是内容 (Anderson) 向右移动,因此相邻的 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
来确保它在表格中的固定位置,但我想知道是否有更好的方法来做到这一点。谢谢
最佳答案
用这个改变 CSS 属性:
.cb_table-hover tbody tr .icon-search{
visibility: hidden;
}
.cb_table-hover tbody tr:hover .icon-search{
visibility: visible;
}
Visibility 属性隐藏元素,但不隐藏它占据的空间。
关于html - 如何在不移动内容位置的情况下将图标放在 <td> 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13701058/