-1

I have following piece of CSS code:

#balancers div p {      
  display: none;
}

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

And markup:

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

It works as expected - when I hover over <div> element, it'll show <p> element. However, I'd like to use CSS transitions here (make <div> slowly increase it's height, without manipulating height property).

How can I do that?

Dr McKay
  • 2,548
  • 2
  • 21
  • 26

4 Answers4

1

I made an example: CSS3 Transition Example

It is possible without JS.

Jannis M
  • 745
  • 1
  • 4
  • 15
0

You won't be able to create this sort of animation with basic CSS. You would need to use something like jQuery animate to get this effect:

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

$("div#balancers").hover(function(){
    $("div#balancers p").show();
    $("div#balancers p").animate({
        height:"200px"
    }, 1500);
});
Curtis
  • 101,612
  • 66
  • 270
  • 352
0

you could use jQuery to achieve something like what your asking.

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

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

SMacFadyen
  • 3,145
  • 2
  • 25
  • 37
-2

Your CSS markup is wrong. Correct would be:

div#balancers > p {      
  display: none;
}

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


<div id="balancers">
  <h1>ID</h1>
  <p>Description</p>
</div>
Jannis M
  • 745
  • 1
  • 4
  • 15
  • Nope. In fact, It's advised not to specify the element tripe with ids and classes in css. It makes it ineficiente without need, since ids are supossed to be uniq. – miguel.camba Mar 12 '13 at 14:28