CSS自动高度和宽度建议

Question

我有一个image和div 。 我想在主图像上悬停时显示overlay div 。 基本上，overlay div将被隐藏，并且仅在悬停时显示。 div高度和宽度应与图像<div class="image"> 。

HTML ：

<div class="image">
    <figure><img src="one.jpg"></figure>
</div>
<div class="overlay">
    <p class="description">
        Some description goes here
    </p>
</div>

Answer 1

如果我设法理解了您的问题，那么您想使一个元素出现在另一个元素之上，并将其完全覆盖。 这就是我要做的。 将叠加层放置在具有图片的div内，以强制它们具有相同的大小，并使叠加层在悬停时可见。

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

#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

如果要使用您拥有的确切HTML结构来做，那就不能了。 没有一些JavaScript，就无法将叠加层设置为具有元素之前的大小。