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

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

 <div class="parent"> <div class="child"> Hello, World! </div> </div> 

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>