CSS3过渡，悬停触发子元素不工作的动画

我希望我的列表项目在其子项目.pusher上悬停时触发css3过渡。我习惯的JS，而不是CSS3过渡这样做，阅读，我想我明白怎么做了一些其他的做题之后，但它不能正常工作：CSS3过渡，悬停触发子元素不工作的动画

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

推杆实际上是被追加到里，与JS，但我不认为这应该导致一个问题？（编辑：这似乎并不成为问题）

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

来源

2014-02-09 Melbourne2991

做一个捣鼓您的问题 – Rex

你可以尝试在'li'硬编码的'.pusher'元素的测试例子，是想看看是否可行与否。 – jwatts1980

刚刚尝试过，现在在一个小提琴中，@ jwatts1980不幸的是它没有工作：http://jsfiddle.net/8KpQW/ – Melbourne2991

您尚未.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; 
}

来源

2014-02-09 09:47:56

似乎没有任何缓动/过渡/动画？ – Melbourne2991

@ Melbourne2991小提琴更新 –

for'inner'：hover :-) –

下面的代码解决了该问题对我来说：

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

过渡属性需要被应用到法案ual要动画的元素，而不是悬停触发器元素。悬停，只需要包含动画将结束的属性值。

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

来源

2014-02-09 19:56:53 Melbourne2991

CSS3过渡，悬停触发子元素不工作的动画

回答

相关问题