CSS。从底部显示 div

【问题标题】：CSS. Show div from bottomCSS。从底部显示 div
【发布时间】：2014-12-29 22:38:25
【问题描述】：

我有底线，在右侧有灰色的 div，我想在悬停时显示完整的 div。一开始灰色的 div 是隐藏的。我该如何解决这个问题？谢谢！

<body>
<div id="wrap">
</div>
<div id="footer">
    <div class="container">
        <div id="footer_right_wrapper"></div>
    </div>
</div>

html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */}

/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -61px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}

#footer {
height: 61px;
background-color: red;
color: black;
}

.container {
height: 61px;
overflow: hidden;
}

#footer_right_wrapper {
width: 100px;
height: 217px;
background-color: grey;
float: right;
}

【问题讨论】：

标签： css show hidden

【解决方案1】：

使用:hover选择器属性：

显示/隐藏灰色元素：

小提琴：http://jsfiddle.net/or2y2fzg/

#footer_right_wrapper {
    display: none;
}
#footer:hover #footer_right_wrapper {
    display: block;
}

如果我理解正确，您想在将光标悬停在#footer 上时显示灰色 div？

展开灰色元素：

如果要扩展灰色元素以填充#footer 元素：http://jsfiddle.net/r30nxzxk/

#footer_right_wrapper {
    width: 100px;

    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
#footer_right_wrapper:hover {
    width: 100%;
}

请注意，我添加了 CSS 过渡以获得流畅的用户体验。

【讨论】：

我希望灰色 div 扩展到顶部。像这样：jsfiddle.net/benasg/75eycjkd/1