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; }

代码：http://jsfiddle.net/MnZDd/13/

Answer 2

就像添加：

一样简单

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

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

当悬停选项卡链接文本颜色不变

2 个答案: