我有一个隐藏的div
,我想要显示它时,它是悬停在使用CSS。不幸的是,无论我做什么,CSS悬停选择器似乎都不起作用。在chrome开发人员的工具中,我可以通过强制使用:hover状态来显示div,但除此之外,它无法工作。
以下是我的代码
.invisible{
display: none;
border: 2px solid red;
}
.invisible:hover{
display: block;
}
<div class="invisible">
Text text text
</div>
发布于 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>
发布于 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>
发布于 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+上工作。
https://stackoverflow.com/questions/51677838
复制相似问题