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过渡（make <div>慢慢增加它的高度，而不操纵height属性。）

我该怎么做？

Answer 1

我做了一个例子：CSS3 Transition Example

没有JS就可以。

Answer 2

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

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

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

Answer 3

你可以使用jQuery来实现你的要求。

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

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

Answer 4

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

div#balancers > p {      
  display: none;
}

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


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

转换孩子的CSS属性

4 个答案: