css - 鼠标悬停 Div 尺寸问题

Question

我目前正在处理一个网站的部分，其中有一个图像网格。我正在尝试设置它，以便当您将鼠标悬停在图像上时，会出现另一个带有一些不透明背景和文本的 div。问题是我无法让鼠标悬停 div 匹配父级的相同尺寸。到目前为止，它在两个方向上都很粘。有什么建议么？这是一些代码

<div class = 'picture-container'>
            <div class = 'picture-wrapper' id = 'top-left'>
                <div class = 'onhover'>hello!</div>
                <img src = 'ds-map.png' height = '100%' width = '100%'>
            </div>
            <div class = 'picture-wrapper' id = 'top-right'>
                <div class = 'onhover'>hello!</div>
                <img src = 'ds-map.png' height = '100%' width = '100%'>
            </div>
            <div class = 'picture-wrapper' id = 'top-center'>
                <div class = 'onhover'>hello!</div>
                <img src = 'ds-map.png' height = '100%' width = '100%'>
            </div>
        </div>

.onhover{
    position:absolute;
    display:none;
    width:30%;
    height:100%;
    background-color:#F5D892;
    opacity:.4;
}


.picture-wrapper{
    width:30%;
    height:100%;
}

.picture-wrapper:hover .onhover{
    display:block;
}

Answer 1

这是一个jsFiddle

<div class='picture-container'>
    <div class='picture-wrapper' id='top-left'>
        <div class='onhover'>hello!</div>
        <div class="img"> </div>
    </div>
    <div class='picture-wrapper' id='top-right'>
        <div class='onhover'>hello!</div>
        <div class="img"> </div>
    </div>
    <div class='picture-wrapper' id='top-center'>
        <div class='onhover'>hello!</div>
        <div class="img"> </div>
    </div>
</div>

.onhover {
    position:absolute;
    display:none;
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    background-color:#F5D892;
    opacity:.4;
}
.picture-wrapper {
    width:100%;
    height:100%;
}
.picture-wrapper:hover .onhover {
    display:block;
}
.img
{
    height:100px;
    width:100px;
    background:blue;
}

看看你的想法