0

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

1 回答 1

0

这是一个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;
}

看你怎么想

于 2013-07-16T16:23:49.100 回答