Geek asks and answers

CSS3 transition, hovering to start animation on child does not work

I would like my list item to trigger a css3 transition to a child .pusherwhen it hangs. I'm used to doing this in JS, not css3 transitions, after reading some other SO questions, which I thought I figured out how to do, but it doesn't work 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 added to li, with JS, but I don't think this should cause a problem? (editing: this does not seem to be a problem)

script: http://jsfiddle.net/8KpQW/

+3
source share
2 answers

You did not define the width for .pusherjust a max-widthso that it does not know how wide it should be.

try it

JSFiddle Demo

CSS

.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;
}
+4

​​:

 #sidebar {
  height: 100%;
  margin-top: 74px;
  background: #303030;
  color: #fff;
}
#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;
}
#sidebar ul li a {
  color: #fff;
  z-index: 5;
  position: relative;
}
#sidebar ul li a:hover {
  text-decoration: none;
}
#sidebar ul li .pusher {
  height: 100%;
  width: 0px;
  background: #383838;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  -webkit-transition: width 0.2s ease-in-out;
  -moz-transition: width 0.2s ease-in-out;
  -o-transition: width 0.2s ease-in-out;
  transition: width 0.2s ease-in-out;
}
#sidebar ul li:hover > .pusher {
  width: 100%;
}

, , . hover, , .

: http://jsfiddle.net/8KpQW/3/

0

More articles:


All Articles