Question

我有底线，右侧有灰色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;
}

Answer 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过渡以实现流畅的用户体验。

CSS。从底部显示div

1 个答案: