Переход дочернего 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-разметка неверна.Правильно будет:

div#balancers > p {      
  display: none;
}

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


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

Answer 4

Вы не сможете создать такую ​​анимацию с помощью базового CSS.Чтобы получить этот эффект, вам нужно использовать что-то вроде jQuery animate:

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

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