Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Css Transition on hover for child element

Im trying to pause the display of a child element when it's parent is hovered over.

Html:

<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

Css:

span { 
    position: relative; 
}
span div { 
    display: none;
    width: 0px;
    opacity: 0;

    transition: width 5s;
    -webkit-transition: width 5s;

    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
span:hover div {
    display: inline-block;
    width: 150px;
    opacity: 1;
}​

As of right now, when the span is hovered, the div has no delay before it is shown. How would I go about fixing it so there is a pause?

Fiddle here: http://jsfiddle.net/SReject/vmvdK/

A few notes:
I originally tried to transition the display, but as Edward pointed out, that isn't possible, and have sense tried the above which, also, isn't working

SOLVED

It would appear that any "display" property in the "transition to" styling will stop any transition animations from happening. To work around this. I set the width of the child to be displayed to 0px and have it be completely transparent. Then in the "transition to" styling, I set the correct width, and make the div solid:

Html:

<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

Css:

span { 
    position: relative; 
}
span div { 
    position: absolute;

    width: 0px;
    opacity: 0;
    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
span:hover div {
    width: 150px;
    opacity: 1;
}​

Fiddle here: http://jsfiddle.net/SReject/vmvdK/

like image 860
SReject Avatar asked Jul 14 '12 21:07

SReject


People also ask

How do you style the parent element when hovering a child element?

The trick is to give the sibling the same size and position as the parent and to style the sibling instead of the parent. This will look like the parent is styled!

How can we prevent child element affected by parents hover state?

You can add pointer-events:none; to your child element - but it will not respond to it's own hover styles either.

Does transition only work with hover?

But transitions are not just limited to use with :hover . You can animate CSS properties, thus use CSS transitions without hover. This is done via transitions using some other CSS techniques, a number of which I've outlined below. I've also included a demo for each example.


1 Answers

According to this article on CSS transitions, which is referenced by the MDN page on CSS transitions, the display property is not one that can be transitioned:

There are several properties or values you’ll want to transition, but which are both unspecced and unsupported at the time of writing:

  • background-image, including gradients
  • ...
  • display between none and anything else

So applying the transition: display 5s; property to your div has no effect.

EDIT:

Based on your updated code, you can achieve the effect you want with opacity and width as long as you don't specify the display property. Simply remove the line

display: none;

from the span div section, and the pop-up menu will use the transitions you specified when you hover over it.

Since the transition from display:none; to display:inline-block can't be animated, this property is probably changed only at the end of the transition - so the opacity animates while the div is still invisible.

like image 186
Edward Avatar answered Oct 26 '22 22:10

Edward