CSS transition fade back to original text color

css, javascript, jquery

Solution

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

Problem

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

Original source