CSS3 过渡，悬停以在子元素上触发动画不起作用

Question

我希望我的列表项在悬停在子项上时触发其子项.pusher上的 css3 过渡。我习惯于在 JS 而不是 css3 过渡中执行此操作，在阅读了其他一些 SO 问题后，我认为我明白了该怎么做，但它无法正常工作：

#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 实际上被附加到 li 中，带有 JS，但我认为这不应该引起问题吗？（编辑：这似乎不是问题）

小提琴：http://jsfiddle.net/8KpQW/

Answer 1

您还没有为.pusher定义宽度，max-width因此它不知道它应该有多宽。

试试这个

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;
}

Answer 2

下面的代码为我解决了这个问题：

 #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%;
}

过渡属性需要应用于要进行动画处理的实际元素，而不是悬停触发器元素。 悬停时，只需要包含动画将结束的属性值。

小提琴：http://jsfiddle.net/8KpQW/3/