html - 如何为 'width' 元素保留 'hide'

Question

我想要的正是 stackoverflow 评论。评论的 hover 显示每个评论的投票和标志形状。 here是我的 fiddle 。元素的 hover 让它移动，而我不想移动。我希望所有元素都固定。

实际上我的问题是:保留不是针对 display 为 none 的元素的 width。如何为隐藏元素分配宽度？

需要注意的是，使用 position: absolute; 是没有用的。它改变形状的位置(投票)。

无论如何，我怎样才能实现像 stackoverflow 评论这样的结构？

---

编辑:

HTML:

<table>
  <tr>
    <td>1234</td>
    <td><a href="#"><i class="fa fa-sort-asc"></i></a></td>
    <td>this is comment 1</td> 
  </tr>
  <tr>
    <td>5</td>
    <td><a href="#"><i class="fa fa-sort-asc"></i></a></td>
    <td>this is comment 2</td>
  </tr>
</table>

CSS:

td{
    padding-right: 5px;
}

a{
    display: none;
}

tr:hover > td a {
    display: block;
}

Answer 1

您可以使用可见性代替显示:http://jsfiddle.net/wrkxg/244/

a{
    visibility: hidden;
}

tr:hover > td a {
    visibility: visible;
}