即使图标被隐藏,也保持相同的宽度

Question

我有一个<div>,当它徘徊时,我正在显示一个<div>包含图标的孩子.

由于图标高于文本,因此新图标会更改父级<div>的高度.它也改变了<div>宽度,因为它插在最后.

我的问题:我希望<div>隐藏图标(带display:none)但仍然具有相同的大小,就像图标在那里(不使用静态宽度/高度).因此,当用户将鼠标悬停在<div>图标上时,将显示图标,但<div>尺寸将保持不变.

那可能吗？

.container {
  display: flex;
}

.row {
  border: 1px solid black;
  cursor: pointer;
  display: flex;
}

.row:hover .icon {
  display: flex;
}

.icon {
  display: none;
}

<div class="container">
  <div class="row">
    <div class="text">This is my div. When it is hovered, I dont want it to change width and height because of the icon.</div>
    <div class="icon"><img src="http://i.imgur.com/NpIpU3F.png"></div>
  </div>
</div>

在CodePen上查看

Answer 1

用visibility: hidden而不是display: none

visibility: hidden保留元素占据的空间,同时使它们成为invisibe. display: none从页面流中删除元素.