html - 悬停时显示隐藏的div

Question

我有一个隐藏的 div，我想在它悬停在上面时使用 CSS 显示它。不幸的是，无论我做什么，CSS 悬停选择器似乎都不起作用。在 chrome 开发者工具中，我可以通过强制 :hover 状态来显示 div，否则它不起作用。

这是我的代码

.invisible{
  display: none;
  border: 2px solid red;
}

.invisible:hover{
  display: block;
}

<div class="invisible">
Text text text
</div>

Answer 1

带有 display: none 的元素不能被悬停，因为它不占用文档中的空间。您可以将元素的 opacity 初始设置为 0 并将 opacity 更改为 1 当它悬停时它不可见，但仍会占用文档中的空间，因此可以将鼠标悬停在上面。

.invisible{
  opacity: 0;
  border: 2px solid red;
}

.invisible:hover{
  opacity: 1;
}

<div class="invisible">
Text text text
</div>

如果你想让div平滑的出现，可以使用transition属性。由于只有 opacity 发生变化，您可以像这样添加不透明度过渡:transition: opacity 1s。 1s 是转换的持续时间(一秒)。您可以更改它以使 div 显示得更慢或更快。

.invisible{
  opacity: 0;
  border: 2px solid red;
  transition: opacity 1s;
}

.invisible:hover{
  opacity: 1;
}

<div class="invisible">
Text text text
</div>