我的页面上有几个 div 框,当您将鼠标悬停在它们上面时,我想让它们显示文本。我正在看一些教程,但我似乎无法让它与我的一起工作,这是我的一个盒子的例子。
HTML:
<div class="squar-1">
<div class="text-1">
<p>Hello</p>
</div>
</div>
CSS:
.squar-1 {
width: 50%;
height: 350px;
background-color: #e57373;
float: left;
}
.squar-1 .text-1 {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
.squar-1:hover .text {
visibility:visible;
}
最佳答案
行得通,你写的是 .text 而不是 .text-1
.squar-1 {
width: 50%;
height: 350px;
background-color: #e57373;
float: left;
}
.squar-1 .text-1 {
position:relative;
left:0px;
visibility:hidden;
}
.squar-1:hover .text-1 {
visibility:visible;
}
<div class="squar-1">
<div class="text-1">
<p>Hello</p>
</div>
</div>
编辑:要转换文本,您应该使用不透明度而不是可见性,例如:
.squar-1 {
width: 50%;
height: 350px;
background-color: #e57373;
float: left;
}
.squar-1 .text-1 {
position:relative;
left:0px;
opacity: 0;
-webkit-transition: opacity 2s; /* For Safari 3.1 to 6.0 */
transition: opacity 2s;
}
.squar-1:hover .text-1 {
opacity: 1;
}
<div class="squar-1">
<div class="text-1">
<p>Hello</p>
</div>
</div>
关于html - CSS 标题悬停?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28775954/