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

回答

相關問題