how make a colored text fade into another using a hover code? (using css transitions)

Code:


a {
  color: #fff !important;
  
  /* dont edit bellow this line */
  transition: color 1.0s linear !important;
  -o-transition: color 1.0s linear !important;
  -moz-transition: color 1.0s linear !important;
  -webkit-transition: color 1.0s linear !important;
/* dont edit above this line */

}
 
a:hover {
  color: #0ff !important;
}


Code:

a {
  color: #fff !important;
  
  /* dont edit bellow this line */
  transition: color 1.0s linear !important;
  -o-transition: color 1.0s linear !important;
  -moz-transition: color 1.0s linear !important;
  -webkit-transition: color 1.0s linear !important;
/* dont edit above this line */

}

Ace 1 wrote:Ok, but I'm changing the code behind the line


Nvm it didnt work even when I didn't change it. It completely removed every fade code I had already now it doesn't do anything when you hover :\

Code:

a {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  color:#fff;
}
a:hover, a:focus, a:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  color:#0ff;
}

Code:

a{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:color;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;color:#fff}a:active,a:focus,a:hover{-webkit-transform:scale(1.1);transform:scale(1.1);color:#0ff}

Code:

a:link:hover, a:link:focus {
text-decoration: none !important;
text-shadow: 0 0 0.9em red, 0 0 0.9em red, 0 0 0.9em red;
}

Code:

a.topictitle:link:hover, a.topictitle:link:focus {
  Add the same code I gave for links
}

Code:

/* DEFAULT DISPLAY */
a {
  color:#FF0;
  transition:500ms;
}

/* HOVER DISPLAY */
a:hover { color:#F00 }

Code:

  -webkit-transition:500ms;
    -moz-transition:500ms;
      -o-transition:500ms;

Code:

a.topictitle:hover span { color:#F00 !important }

Ange Tuteur wrote:The standard syntax would be :

Code:

/* DEFAULT DISPLAY */
a {
  color:#FF0;
  transition:500ms;
}

/* HOVER DISPLAY */
a:hover { color:#F00 }

( You can also use a:link for default links, a:visited for visited, and a:active for active links )

If you wanted to have better CSS3 support for older browsers, prefixing transition is the way to go.

Code:

  -webkit-transition:500ms;
    -moz-transition:500ms;
      -o-transition:500ms;

( that would be added to the first rule )

Normally when a style doesn't take effect, adding the !important flag should override the style that wasn't changing to begin with. However, in Ace's case, it appears that the topic title is being colored by a span tag. I'm assuming you have the ability to color topic titles enabled.

Anyway, you can override this style with the following rule :

Code:

a.topictitle:hover span { color:#F00 !important }

Change the red hexadecimal color to whatever you want.