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列表菜單淡入淡出轉換不起作用

回答

相關問題