CSS3列表菜单淡入淡出转换不起作用

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

这是标志了我使用

<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。也许我错过了什么？

来源

2014-01-21 Greg

你正在改变图像。我不确定如何过渡与图像工作！更好地使用backh =底色并对其应用转换 – Navaneeth

如果答案对您有帮助，请接受答案。谢谢。 – tannerjohn

有需要正确的代码一个几件事情，

变化#navMenu a:hover到#navMenu li a:hover。这只是为了使它更具体。

你对你的过渡行指定时间两次。将transition: background 2s 3s ease-in;更改为transition: background 2s ease-in;。并因此改变所有的转换线。

这是Live Demo。

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

只是要注意：秒或3秒中的过渡，使效果看起来很慢。减少它，它一定会看起来更好。

来源

2014-01-21 16:05:50 tannerjohn

我建议使用0.2s左右的过渡。约翰说得对，你的持续时间太长，现在 –

@ZachSaucier，是的，.2会使它变好。 – tannerjohn

CSS3列表菜单淡入淡出转换不起作用

回答

相关问题