Question

所以我有一个基础div和一个悬停div（将在鼠标悬停时显示：js中的块）。

无论如何，我正在努力使我的悬停div的高度和宽度与我的基础div的高度和宽度相匹配。

我认为问题是因为我的响应代码，同样在基础div中，图像实际上是在另一个背景图像上，宽度和高度设置为95％以创建边框效果。

#user-options li img.role-photo {
    width: 95%;
    height: 95%;
    padding-top: 5px;
}

我已将我的作品上传到 test link here 。

正如你所看到的，在第二张“卡片”中，我有悬停div显示。带有“用Facebook登录”按钮的不透明白色框子可以掩盖下面歌手的图像。我似乎无法让它正常工作:(

这是我的jsfiddle

http://jsfiddle.net/leongaban/PWVBp/

当前页面的HTML：

<ul id="user-options">
<li>
    <img class="role-photo" src="../images/registration_fan_tile.png" alt="Fan"/>

    <h3>Fan</h3>
    <p>Calling all tastemakers! Influence Hollywood, don't just consume it. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li style="">
    <div class="role-card-talent" style="position: relative;">
        <img class="role-photo" src="../images/registration_talent_tile.png" alt="Talent"/>

        <!-- Hover Controls -->
        <div class="hover_controls" style="display:block;">

            <a href="#" class="fbLoginBtn"><img class="fb-signin" src="../images/registration_signin_fb.png"></a>

            <div class="learn_about_pages learnMoreLink" tag="" style="margin:10px">
                <a href="#"><img src="../images/registration_info_icon.png">Learn More</a>
            </div>
        </div><!-- hover_controls -->
    </div><!-- role-card-talent -->

    <h3>Talent</h3>
    <p>Oh, Hai! Now you are on your way to being "connected." You're welcome. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</li>

CSS

#user-options {
    margin:0px; padding:0px; float:left; width:100%; list-style-type:none;
}
#user-options li {
    position: relative;
    float:left;
    width:20%;
margin: 1%;
    text-align: center;
    padding: 5px;
    background: url("../../images/one_background.png") no-repeat;
    background-size: 100% auto;
    overflow: hidden;
}
#user-options li img.role-photo {
    width: 95%;
    height: 95%;
    padding-top: 5px;
}
.hover_controls {
    position: absolute;
    margin: 0;
    top: 5px;
    left: -5px;
    padding: 5px;
    /*padding-top: 20px;*/
    width: 100%;
    height: auto;
    /*min-height: */
    text-align: center;
    color: #409ad5;
    font-size: 0.875em;
    font-weight: bold;
    background: rgba(255,255,255,.5);
    background-size: 100%;
}

.hover_controls a {
    color: #666;
    font-size: 0.750em;
}

.hover_controls img.fb-signin {
     width: 100%;
}

Answer 1

在css中的.hover_controls上将高度设置为100％。见jsfiddle

http://jsfiddle.net/cornelas/PWVBp/3/

.hover_controls {
position: absolute;
margin: 0;
top: 5px;
left: -5px;
padding: 5px;
/*padding-top: 20px;*/
width: 100%;
height: 100%; /** CHANGE TO 100% **/
/*min-height: */
text-align: center;
color: #409ad5;
font-size: 0.875em;
font-weight: bold;
background: rgba(255,255,255,.5);
background-size: 100%;
}

Answer 2

只需将bottom: 5px;添加到您的.hover_controls课程中，如下所示：

.hover_controls {
    position: absolute;
    margin: 0;
    top: 5px;
    bottom: 5px;
    left: -5px;
    padding: 5px;
    /*padding-top: 20px;*/
    width: 100%;
    height: auto;
    /*min-height: */
    text-align: center;
    color: #409ad5;
    font-size: 0.875em;
    font-weight: bold;
    background: rgba(255,255,255,.5);
    background-size: 100%;
}

如果您将top和bottom或left和right设置为相对块内的绝对块，它将以其底部和底部的方式拉伸其高度/宽度顶行或左右边界将位于父相对div的对应边的x像素中

演示：http://jsfiddle.net/PWVBp/5/

创建一个匹配基本div的高度和宽度的悬停div

2 个答案: