将鼠标悬停时显示隐藏的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>

Answer 2

请参阅此小提琴，这可能会有所帮助，您正在尝试实现什么。 您可以使用父div尺寸调整悬停区域。 https://jsfiddle.net/pcwudrmc/37399/

a

.parent {
  padding: 20px;
}

.parent .child {
  display: none;
  background: red;
  padding: 20px;
  text-align: center;
}

.parent:hover .child {
  display: block;
}

Answer 3

您可以使用visibility：

.content .invisible {
  visibility: hidden;
  border: 2px solid red;
}

.content:hover .invisible {
  visibility: visible;
}

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

请确保添加父div，否则在Chrome 23+上将无法使用。

Answer 4

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

.invisible:hover{
  opacity: 1;
  transition: all 1.5s;
}

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