Question

我有image和div。我想在悬停在主图像上时显示叠加层div。基本上，叠加层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，就无法将叠加层设置为具有元素大小。

CSS自动高度和宽度建议

1 个答案: