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实际上是用JS附加到li，但我不认为这会导致问题？（编辑：这似乎不是问题）

小提琴：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%;
}

需要将transition属性应用于要设置动画的实际元素，而不是悬停触发器元素。悬停，只需要包含动画将结束的属性值。

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

CSS3 Transition，悬停以触发子元素无法正常工作的动画

2 个答案: