[英]CSS auto height and width suggestion
I have an image
and div
. 我有一个
image
和div
。 I want to show the overlay div
when hovering on the main image. 我想在主图像上悬停时显示overlay
div
。 Basically, the overlay div
will be hidden and it will be shown only on hovering. 基本上,overlay
div
将被隐藏,并且仅在悬停时显示。 The div
should be same height and width like the image <div class="image">
. div
高度和宽度应与图像<div class="image">
。
HTML : HTML :
<div class="image">
<figure><img src="one.jpg"></figure>
</div>
<div class="overlay">
<p class="description">
Some description goes here
</p>
</div>
If I managed to understand your question, you want to make an element appear over another one and to cover it fully. 如果我设法理解了您的问题,那么您想使一个元素出现在另一个元素之上,并将其完全覆盖。 Here's how I would do it.
这就是我要做的。 Put the overlay inside a div with the image to force them to have the same size and make the overlay visible when the parent is hovered.
将叠加层放置在具有图片的div内,以强制它们具有相同的大小,并使叠加层在悬停时可见。
HTML HTML
<div class="hoverable fillme" id="example">
<figure>
<img src="one.jpg" alt="one" />
</figure>
<div class="overlay">Some description goes here</div>
</div>
CSS CSS
#example {
width: 200px;
height: 200px;
}
.fillme {
position: absolute;
}
.fillme>* {
position: absolute;
top: 0px;
left: 0px;
}
.fillme *{
width: 100%;
height: 100%;
margin: 0px;
padding; 0px;
}
.overlay {
visibility: hidden;
background-color: #5555FF;
z-index: 100;
}
.hoverable:hover .overlay{
visibility: visible;
}
http://jsfiddle.net/do8byofd/1 http://jsfiddle.net/do8byofd/1
If you want to do it with the exact HTML structure you have, you can't. 如果要使用您拥有的确切HTML结构来做,那就不能了。 There's no way to set the overlay to have the size of the element before it without some JavaScript.
没有一些JavaScript,就无法将叠加层设置为具有元素之前的大小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.