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

看看你的想法

鼠标悬停Div尺寸问题

1 个答案: