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

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/