CSS。从底部显示div

我有底线，右侧有灰色div，我想悬停以显示完整的div。在开始灰色div被隐藏。我怎么能解决这个问题？谢谢！CSS。从底部显示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; 
}

来源

2014-12-29 BenasG

使用:hover选择属性：

显示/隐藏灰色元素：

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

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

如果我正确地理解了你，你想要显示灰色div，只要你将光标悬停在#footer上？

。

展开灰色元素：

如果你想扩展灰色元素，以填补#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过渡具有平滑的UX。

来源

2014-12-29 22:50:33

我希望灰色的div扩大到顶部。像这样：http://jsfiddle.net/benasg/75eycjkd/1/ – BenasG

CSS。从底部显示div

回答

相关问题