鼠标悬停 div 尺寸问题答案

【问题标题】：Mouseover Div Dimensions Issue鼠标悬停 div 尺寸问题
【发布时间】：2013-07-16 15:50:09
【问题描述】：

我目前正在处理网站中包含图像网格的部分。我正在尝试设置它，因此当您将鼠标悬停在图像上时，另一个 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;
}

【问题讨论】：

标签： css image html mouseover

【解决方案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;
}

看看你的想法

【讨论】：