鼠标悬停在Div Dimensions问题上

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;
}

看看你怎么想的