Я пытаюсь использовать эффект замедления 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 .