當懸停選項卡鏈接文本顏色不變

我試圖在鼠標懸停選項卡時使用CSS3緩出效果，此處背景顏色正在更改，但文本顏色不變。當懸停選項卡鏈接文本顏色不變

我的HTML代碼：

<html> 
    <body> 
     <div id="tab" class="links"> 
      <a href="#">Rang De</a> 
     </div> 
     <div id="tab" class="links"> 
      <a href="#">Robin Sharma</a> 
     </div> 
     <div id="tab" class="links"> 
      <a href="#">Programme</a> 
     </div> 
     <div id="tab" class="links"> 
      <a href="#">Book now</a> 
     </div> 
     <div id="tab" class="links"> 
      <a href="#">Contact</a> 
     </div> 
    </body> 
</html>

我的CSS是：

#tab 
{ 
    float: left; 
    padding: 15px 10px 10px 10px; 
    background: url(images/menutop.gif) repeat-x 0px 0px #EDEDED; 
    height: 25px; 
    width: 176px; 
    font-size: 16px; 
    text-align: center; 
    border: 1px solid #FAFAFA; 
    box-shadow: 0px 4px 4px #d5d5d5; 
    -moz-box-shadow: 0px 4px 4px #d5d5d5; 
    -webkit-box-shadow: 0px 4px 4px #d5d5d5; 
} 
.links:hover 
{ 
    background: #00a9dd !important; 
    color: #fff; 
    text-shadow: 0.1em 0.1em 0.05em #333; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
}

這裏有一個jsFiddle。

來源

2012-01-05 Suresh Pattu