CSS3 Transition, hover to trigger animation on child element not working

css, css-transitions, html

Solution

You haven't defined a width for `.pusher` merely a `max-width` so it doesn't know how wide it is supposed to be.

Try this

JSFiddle Demo

CSS extract

.pusher {
    width:0;
    transition:width 0.5s ease;
}

#sidebar ul li:hover .pusher {
    width: 100px;
    height: 100%;
    background: #383838;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

Problem

I would like my list item to trigger a css3 transition on its child item `.pusher` when hovered over. I am used to doing this in JS and not css3 transitions, after reading some other SO questions I thought I understood how to do it, but it's not working correctly: ``` #sidebar ul { float: left; list-style: none; padding: 0; margin: 0; width: 100%; } #sidebar ul li { padding: 20px; position: relative; list-style: none; border-bottom: 1px solid #4a4a4a; cursor: pointer; -webkit-transition: max-width 0.5s ease; transition: max-width 0.5s ease; } #sidebar ul li a { color: #fff; z-index: 5; position: relative; } #sidebar ul li a:hover { text-decoration: none; } #sidebar ul li:hover > .pusher { max-width: 100px; height: 100%; background: #383838; position: absolute; left: 0; top: 0; z-index: 1; } #sidebar ul li:first-child { border-top: 1px solid #4a4a4a; } ``` Pusher is actually being appended to li, with JS, but I don't think this should cause an issue? (edit: this does not appear to be the issue) fiddle: http://jsfiddle.net/8KpQW/

Original source