CSS轉換立即淡出

Question

我知道這是一個常見問題，我讀了很多關於它，只是不能在我的CSS代碼中實現各種解決方案，請指教。

我有一個簡單的ul和li元素，淡出效果正在工作，但淡出dont。我知道我需要將轉換代碼置於ul li元素的「正常」狀態，但它不會工作。

#menu li a{ 
     color: white; 
     text-decoration: none; 
     font-family:arial; 
     font-size: 14px; 
     padding-right: 15px; 
    } 

    #menu ul li{ 
     display: inline; 
    } 

    ul{ 
     list-style-type: none; 
     margin: 0px; 
     padding: 0px; 
    } 

    #menu ul li a:hover { 
     color: dodgerblue; 
     -webkit-transition: color 0.3s linear 0s; 
     -moz-transition:color 0.3s linear 0s; 
     -ms-transition:color 0.3s linear 0s; 
     -o-transition:color 0.3s linear 0s; 
     transition:color 0.3s linear 0s; 
    } 

Answer 1

簡而言之的transition屬性（和供應商前綴）的#menu li a選擇器本身內，如下所示：

#menu li a { 
    color: white; 
    text-decoration: none; 
    font-family:arial; 
    font-size: 14px; 
    padding-right: 15px; 

    -webkit-transition: color 0.3s linear 0s; 
    -moz-transition:color 0.3s linear 0s; 
    -ms-transition:color 0.3s linear 0s; 
    -o-transition:color 0.3s linear 0s; 
    transition:color 0.3s linear 0s; 
} 

#menu ul li a:hover { color: dodgerblue; } 

WORKING DEMO。然後

Answer 2

使用prefixfree從利·貝羅添加您的代碼應該是這樣的：

#menu li a{ 
      color: white; 
      text-decoration: none; 
      font-family:arial; 
      font-size: 14px; 
      padding-right: 15px; 
     } 

     #menu ul li{ 
      display: inline; 
     } 

     ul{ 
      list-style-type: none; 
      margin: 0px; 
      padding: 0px; 
     } 

     #menu ul li a:hover { 
      color: dodgerblue; 
     } 
     #menu ul li a { 
      transition:color 0.3s linear 0s; 
     } 

你CA得到一個CDN版本在這裏prefixfree