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

Question

將鼠標懸停在選項卡上時，我嘗試使用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 。

Answer 1

添加.links:hover a { color:#fff; } .links:hover a { color:#fff; }

代碼： http ： //jsfiddle.net/MnZDd/13/

Answer 2

就像添加一樣簡單：

.links:hover a {
    color: #000;
}

http://jsfiddle.net/MnZDd/15/

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

問題描述

2 個解決方案

解決方案1
3 已采納 2012-01-05 09:58:04

解決方案2
0 2012-01-05 10:01:46

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

問題描述

2 個解決方案

解決方案1 3 已采納 2012-01-05 09:58:04

解決方案2 0 2012-01-05 10:01:46

解決方案1
3 已采納 2012-01-05 09:58:04

解決方案2
0 2012-01-05 10:01:46