[英]CSS caption over hover?
I have a few div boxes on my page, and I'd like to make them display text when you hover over them. 我的页面上有几个div框,当您将鼠标悬停在它们上方时,我想使它们显示文本。 I was looking at a few tutorials but I can't seem to get it to work with mine, here is an example of one of my boxes.
我当时在看一些教程,但是我似乎无法使其与我的作品一起使用,这是我的一个例子。
html: HTML:
<div class="squar-1">
<div class="text-1">
<p>Hello</p>
</div>
</div>
CSS: 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;
}
That's working, you wrote .text instead of .text-1 可以,您写的是.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>
Edit: to transition text, you should used opacity instead of visibility like: 编辑:要过渡文本,应使用不透明度而不是可见性,例如:
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.