li:悬停显示:阻止ul是li的孩子。如何进行过渡?

时间:2012-10-13 02:54:31

标签: css css3 css-transitions

li:悬停显示:阻止ul是li的孩子。如何进行过渡?

代码:

<li class="level0 nav-2 level-top parent">
    <a href="#" class="level-top"><span>Womens</span></a>
    <ul class="level0"><li class="level1 nav-2-1 first">
        <a href="#"><span>Running</span></a></li>
        <li class="level1 nav-2-2"><a href="#"><span>Skateboarding</span></a></li>
        <li class="level1 nav-2-3 last"><a href="#"><span>Casual</span></a></li>
    </ul>
</li>

1 个答案:

答案 0 :(得分:2)

CSS过渡

li ul {
    opacity: 0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

li:hover ul {
    opacity: 1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}​

小提琴:http://jsfiddle.net/gezmy/