display：none

Question

我有一个<div>，当它悬停时，我正在显示一个包含图标的孩子<div>。

由于图标高于文字，因此新图标会更改父<div>的高度。它还会更改<div>的宽度，因为它会在最后插入。

我的问题：我希望<div>隐藏图标（使用display:none），但仍然具有与图标在那里相同的大小（不使用静态宽度/高度）。因此，当用户将鼠标悬停在<div>上时，系统会显示图标，但<div>尺寸将保持不变。

这可能吗？

＆＃13;

.container {
  display: flex;
}

.row {
  border: 1px solid black;
  cursor: pointer;
  display: flex;
}

.row:hover .icon {
  display: flex;
}

.icon {
  display: none;
}

＆＃13;

<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>

＆＃13;

查看CodePen

Answer 1

使用visibility: hidden代替display: none

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

Answer 2

使用visibility: hidden;和visibility: visible;

display：none

关闭元素的显示，使其对布局没有影响（文档呈现为元素不存在）。所有后代元素的显示都会关闭。

可见性：隐藏

元素框不可见（未绘制），但仍然会正常影响布局。如果元素的可见性设置为可见，则元素的后代将可见。元素无法获得焦点（例如在浏览选项卡索引时）。

如果您仍然需要，请将display: flex;移至.icon（或删除它，因为如果文字扭曲到第二行，flex会拉伸图像。）

.container {
  display: flex;
}

.row {
  border: 1px solid black;
  cursor: pointer;
  display: flex;
}

.row:hover .icon {
  visibility: visible;
}

.icon {
  visibility: hidden;
  display:flex;
}

<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>

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

2 个答案:

display：none

可见性：隐藏