如何添加一個CSS3過渡到一個子元素，當父母被徘徊

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>CSS Transition</title> 
    <style> 
    .child{ display: none; } 
    .parent:hover > .child{ display: block; } 
    </style> 
</head> 
<body> 
    <div class="parent"> 
    <div class="child">Content</div> 
    </div> 
</body> 
</html>

我已經創建了一個簡單的佈局，上面顯示了我試圖實現的概念。我現在想要做的是做一個CSS3過渡，讓父母在徘徊時可以放鬆。但是，我不知道在哪裏放置轉換代碼，因此它可以工作。如何添加一個CSS3過渡到一個子元素，當父母被徘徊

來源

2013-07-05 Soma Mizobuchi

對於隱藏的子div，請使用height: 0;和overflow: hidden;而不是display: none;，然後在懸停時顯示的子項上添加指定的高度。這將允許過渡發生。

我會做這樣的事情：http://jsfiddle.net/atjG8/1/

.parent { 
    background: red; 
} 
.child { 
    overflow: hidden; 
    height: 0; 
    background: blue; 
    -webkit-transition: all .8s ease; 
    -moz-transition: all .8s ease; 
    -ms-transition: all .8s ease; 
    -o-transition: all .8s ease; 
    transition: all .8s ease; 
    color: white; 
} 
.parent:hover > .child { 
    height: 30px; 
    display: block; 
}

加入例如

顏色...

來源

2013-07-05 13:21:47

如何添加一個CSS3過渡到一個子元素，當父母被徘徊

回答

相關問題