转换子项的 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

我举了一个例子：CSS3转换示例

没有JS是可能的。

Answer 2

您可以使用jQuery来实现您所要求的东西。

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

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

Answer 3

您将无法使用基本CSS创建此类动画。你需要使用类似jQuery animate的东西来获得这种效果：

http://api.jquery.com/animate/

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

Answer 4

您的CSS标记是错误的。正确的做法是：

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

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