2

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

无论如何，我很难让悬停 div 的高度和宽度与我的基本 div 的高度和宽度相匹配。

我认为问题出在我的响应代码上，同样在基本 div 中，图像实际上位于另一个背景图像之上，并且宽度和高度设置为 95% 以创建边框效果。

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

我已将我的作品上传到此处的测试链接。

如您所见，在第二张“卡片”上，我显示了悬停 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%;
}
4

2 回答 2

2

在 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%;
}
于 2013-05-08T15:45:21.117 回答
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/

于 2013-05-08T15:45:55.083 回答