轉移孩子的CSS屬性

Question

我有下面這段CSS代碼：

#balancers div p {  
    display: none; 
} 

#balancers div:hover p { 
    display: block; 
} 

和標記：

<div id="balancers"> 
    <h1>ID</h1> 
    <p>Description</p> 
</div> 

它按預期工作 - 當我將鼠標懸停在<div>元素，它會告訴<p>元素。不過，我想在這裏使用CSS轉換（使<div>緩慢增加它的高度，而不操縱height屬性）。

我該怎麼做？

Answer 1

您將無法使用基本CSS創建此類動畫。您將需要使用像jQuery的動畫來獲得這樣的效果：

$("div#balancers").hover(function(){ 
    $("div#balancers p").show(); 
    $("div#balancers p").animate({ 
     height:"200px" 
    }, 1500); 
}); 

Answer 2

你可以使用jQuery實現的東西像什麼你問。

$("#balancers p").hover(function(){ 
    $(this).fadeOut(100); 
    $(this).fadeIn(500);} 
); 

例：http://api.jquery.com/hover/

Answer 3

你的CSS標記是錯誤的。正確的應該是：

div#balancers > p {  
    display: none; 
} 

div#balancers:hover > p { 
    display: block; 
} 


<div id="balancers"> 
    <h1>ID</h1> 
    <p>Description</p> 
</div> 

Answer 4

我做了一個例子：CSS3 Transition Example

這是可能沒有JS。