CODEWITHSUNDEEP
htmlcss
Suresh Pattu
Suresh Pattu

Reputation: 6209

when hover tab link the text color not changing

I am trying to use the CSS3 ease-in-out effect when mouseover the tabs, here the background color is changing, but the text color is not changing.

My HTML code is:

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

My CSS is:

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

Here's a jsFiddle.

Upvotes: 0

Views: 1753

Answers (2)

Jules
Jules

Reputation: 7223

It's as simple as adding:

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

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

Upvotes: 0

Samich
Samich

Reputation: 30095

Add .links:hover a { color:#fff; }

Code: http://jsfiddle.net/MnZDd/13/

Upvotes: 3

Related Questions