当div悬停在其上时显示隐藏的div
当div悬停在其上时显示隐藏的div
提问于 2018-08-04 01:55:44
我有一个隐藏的div，我想要显示它时，它是悬停在使用CSS。不幸的是，无论我做什么，CSS悬停选择器似乎都不起作用。在chrome开发人员的工具中，我可以通过强制使用:hover状态来显示div，但除此之外，它无法工作。
以下是我的代码
.invisible{
display: none;
border: 2px solid red;
}
.invisible:hover{
display: block;
}<div class="invisible">
Text text text
</div>
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-08-04 01:56:24
带有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>
Stack Overflow用户
发布于 2018-08-04 04:14:43
看看这个小提琴，这可能会对你想要实现的东西有所帮助。可以使用父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>
Stack Overflow用户
发布于 2018-08-04 04:27:18
您可以使用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+上工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51677838
复制相关文章
相似问题