Question

我有一个无序列表导航菜单，其中我使用css3在悬停时淡入背景图像。交换图像是有效的，但没有转换或淡入淡出。相反，它只是立即。你可以在这里看到http://bokushucom.ipage.com/Miltonkarate/karate_test/

这是我正在使用的标记

<div id="header">
            <div id="navMenu">
                <div class="table">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Lil' Dragons</a></li>
                    <li><a href="#">Junior Program</a></li>
                    <li><a href="#">Adult Program</a></li>
                    <li><a href="#">Kendo</a></li>
                    <li><a href="#">Tai Chi</a></li>
                    <li><a href="#">Contact</a></li>   
                 </div>    
            </div><!--end of navMenu-->
</div><!--end of header-->

和CSS

#navMenu {
    position:absolute;
    height:34px;
    width:940px;
    bottom:18px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    left:0;
    font-size: 12px;
    list-style:none;
}

.table {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
}

#navMenu li {
    display: block;
    float:left;
    height:34px;
    border-left:1px solid #5A5A5A;
    border-right:1px solid #333;
    position:relative;
    line-height: 34px;
    }

#navMenu li a {
    display:block;
    height:34px;
    position:relative;
    color:#FFF;
    padding-left:15px;
    padding-right:15px;
    background:url(../images/navMenuBG.jpg) repeat-x;
    -webkit-transition: background 2s 3s ease-in;
    -moz-transition: background 2s 3s ease-in;
    -o-transition: background 2s 3s ease-in;
    transition: background 2s 3s ease-in;
    }

#navMenu a:hover {
    background:url(../images/navMenu_shadow.png);
    height:35px;
    color: #666;
    }

我对CSS3很新。也许我错过了什么？

Answer 1

纠正您的代码需要少数事，

将#navMenu a:hover更改为#navMenu li a:hover。这只是为了使其更具体。
您在转换行中指定了两次的持续时间。将transition: background 2s 3s ease-in;更改为transition: background 2s ease-in;。并因此改变所有过渡线。

这是Live Demo。

我希望这可以解决您的问题。

只需注意： 转换中的2s或3s会使效果看起来非常慢。减少它，它看起来肯定会更好。

CSS3列表菜单淡入淡出过渡不起作用

1 个答案: