Question

我想要的就是 stackoverflow 评论。 hover评论显示每个评论的投票结果和标志形状。 here是我的小提琴。元素的hover使它移动，而我不想移动。我希望所有元素都固定。

实际上我的问题是：预订不适用于width为display的元素的none。如何为hide元素分配宽度？

应该注意，使用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;
}

Answer 2

当您使用display:none时，它就像DOM上不存在该元素一样。但是在DOM中使用该元素的可见性属性保留位置。当您为hidden使用visibility值时，该元素不可见但仍占用空间。 HERE是w3schools class

所以代替display使用visibility属性

a{
 visibility: hidden;
}

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

喜欢HERE

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

2 个答案: