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，就無法將疊加層設置為具有元素之前的大小。