Well I have successfully made my text transition to a different color with a 1s delay, but upon the mouse no longer hovering over the element, I cannot figure out how to make it do a transition back to the original color without going to it immediately.

I looked around online and cannot find much to help. If anything that I found, I couldn't figure out how to piece it together to make it work properly.

HTML:

<div id="navbar">
<div id="navlinks">
<nav>
<ul id="navlist">
<li><a href="#">HOME</a></li>
<li><a href="#">ASSIGNMENTS</a></li>
<li><a href="#">DREAM CARS</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</div>

CSS:

body{
margin:0 auto;
}
#logo{
margin:auto;
width:430px; 
}
#navbar{
width:100%;
height:50px;
display:table;
margin:auto;
}
#navlinks ul {
display:table;
border-collapse:collapse;
width:100%;
margin:0 0 20px;
padding:0;
list-style:none;
}
#navlinks li {
display: table-cell;
vertical-align: middle;
text-align:center;
width:20%;
background: linear-gradient(to right, #111 50%, #444 50%);
background-size: 200% 100%;
background-position:left top;
transition:all 1s ease;
-webkit-transition-delay:all 1s ease;
-moz-transition-delay:all 1s ease;
-ms-transition-delay:all 1s ease;
-o-transition-delay:all 1s ease;
}
#navlinks li:hover{
background-position:right top;
}
#navlinks a {
text-decoration:none;
color: #999;
text-transform: uppercase;
display:block;
padding-top:10px;
padding-bottom:10px;
font: bold 12px/25px Arial, Helvetica;
}

#navlinks a:hover{
color:black;
transition:all 1s ease;
-webkit-transition-delay:all 1s ease;
-moz-transition-delay:all 1s ease;
-ms-transition-delay:all 1s ease;
-o-transition-delay:all 1s ease;
}

I also attempted to follow jquery tutorials on this, and it simply had done nothing to the pages at all.

Demo in Jsfiddle

Well I have successfully made my text transition to a different color with a 1s delay, but upon the mouse no longer hovering over the element, I cannot figure out how to make it do a transition back to the original color without going to it immediately.

I looked around online and cannot find much to help. If anything that I found, I couldn't figure out how to piece it together to make it work properly.

HTML:

<div id="navbar">
<div id="navlinks">
<nav>
<ul id="navlist">
<li><a href="#">HOME</a></li>
<li><a href="#">ASSIGNMENTS</a></li>
<li><a href="#">DREAM CARS</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</div>

CSS:

body{
margin:0 auto;
}
#logo{
margin:auto;
width:430px; 
}
#navbar{
width:100%;
height:50px;
display:table;
margin:auto;
}
#navlinks ul {
display:table;
border-collapse:collapse;
width:100%;
margin:0 0 20px;
padding:0;
list-style:none;
}
#navlinks li {
display: table-cell;
vertical-align: middle;
text-align:center;
width:20%;
background: linear-gradient(to right, #111 50%, #444 50%);
background-size: 200% 100%;
background-position:left top;
transition:all 1s ease;
-webkit-transition-delay:all 1s ease;
-moz-transition-delay:all 1s ease;
-ms-transition-delay:all 1s ease;
-o-transition-delay:all 1s ease;
}
#navlinks li:hover{
background-position:right top;
}
#navlinks a {
text-decoration:none;
color: #999;
text-transform: uppercase;
display:block;
padding-top:10px;
padding-bottom:10px;
font: bold 12px/25px Arial, Helvetica;
}

#navlinks a:hover{
color:black;
transition:all 1s ease;
-webkit-transition-delay:all 1s ease;
-moz-transition-delay:all 1s ease;
-ms-transition-delay:all 1s ease;
-o-transition-delay:all 1s ease;
}

I also attempted to follow jquery tutorials on this, and it simply had done nothing to the pages at all.

Demo in Jsfiddle

• javascript
• jquery
• css

• is this you look for ? jsfiddle/KHn3Z/1 – G-Cyrillus Commented Mar 23, 2014 at 19:39
• No I mean, when you mouse off the tab, and the slider goes back to the original color, I want the text to also go back to its original color but with a fade back to it. – user3453103 Commented Mar 23, 2014 at 19:42
• transitions needs to set on defaut state or both – G-Cyrillus Commented Mar 23, 2014 at 19:56

2 Answers 2

#navlinks a {
transition:color 1s ease;/*i just moved this from anchor*/
}

#navlinks li:hover a{
color:black;
}

WORKING DEMO

body{
  margin:0 auto;
}
#logo{
  margin:auto;
  width:430px; 
}
#navbar{
  width:100%;
  height:50px;
  display:table;
  margin:auto;
}
#navlinks ul {
  display:table;
  border-collapse:collapse;
  width:100%;
  margin:0 0 20px;
  padding:0;
  list-style:none;
}
#navlinks li {
  display: table-cell;
  vertical-align: middle;
  text-align:center;
  width:20%;
  background: linear-gradient(to right, #111 50%, #444 50%);
  background-size: 200% 100%;
  background-position:left top;
  transition:all 1s ease;
}
#navlinks li:hover{
  background-position:right top;
}
#navlinks a {
  text-decoration:none;
  color: #999;
  text-transform: uppercase;
  display:block;
  padding-top:10px;
  padding-bottom:10px;
  font: bold 12px/25px Arial, Helvetica;
  transition:color 1s ease-in-out;
}

#navlinks li:hover a{
  color:black;

}

<div id="navbar">
  <div id="navlinks">
    <nav>
      <ul id="navlist">
        <li><a href="#">HOME</a></li>
        <li><a href="#">ASSIGNMENTS</a></li>
        <li><a href="#">DREAM CARS</a></li>
        <li><a href="#">PROJECTS</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>
  </div>
</div>

The transitions should not be in the hover selector in CSS, but in the element selector without any modified state.

#navlinks a {
text-decoration:none;
color: #999;
text-transform: uppercase;
display:block;
padding-top:10px;
padding-bottom:10px;
font: bold 12px/25px Arial, Helvetica;
transition:all 1s ease;
-webkit-transition-delay:all 1s ease;
-moz-transition-delay:all 1s ease;
-ms-transition-delay:all 1s ease;
-o-transition-delay:all 1s ease;
}

JSFiddle.