Question

我认为这应该是一个快速的问题。我正在尝试使用悬停在div上创建一个简单的叠加层。这一半起作用，因为图像没有被覆盖。

<div class="puzzlePieceContainer">
    <img class="back-link puzzleTileBack-4" style="display: none; margin-left: 0px;" alt="" />
    <div class="boxShadow arrowMargin">
        <div class="overlayContainer overlayBox">
            <div id="puzzleTile-4" class="puzzleTiles">
                <img src="http://debtsettlementlogic.com/wp-content/uploads/2013/09/debt-solutions-florida.jpg" alt="" width="300" height="199" />
                <h2 style="padding-top: 10px;">Solutions</h2>
            </div>
        </div>
    </div>
</div>

CSS：

 .overlayBox:hover   
{  
    background:rgba(0,0,0,.15);
}

这是我的小提琴：http://jsfiddle.net/3aRY4/

如何获得叠加覆盖整个div的效果，而不仅仅是图片周围的所有内容？

Answer 1

一种方法是通过伪元素添加叠加层。只需将伪元素相对于父元素绝对定位，并使其覆盖整个元素。

Updated Example

.overlayBox {
    position:relative;
}
.overlayBox:hover:after {
    content:'';
    position:absolute;
    background:rgba(0, 0, 0, .15);
    top:0; bottom:0;
    left:0; right:0;
}

Image和Div叠加，不太合适

1 个答案: