Fade Effect on Link Hover

Question

on many sites  such as http   www clearleft com  you ll notice that when the links are hovered over  they will fade into a different color as opposed to immediately switching  the default action   I assume JavaScript is used to create this effect  does anyone know how

User · Answer

I know in the question you state  I assume JavaScript is used to create this effect  but CSS can be used too  an example is below   CSS   fancy-link      color   333333     text-decoration  none     transition  color 0 3s linear     -webkit-transition  color 0 3s linear     -moz-transition  color 0 3s linear      fancy-link hover      color   F44336      HTML   lt a class  fancy-link  href     gt My Link lt  a gt    And here is a JSFIDDLE for the above code     Marcel in one of the answers points out you can  transition multiple CSS properties  you can also use  all  to effect the element with all your  hover styles like below   CSS   fancy-link      color   333333     text-decoration  none     transition  all 0 3s linear     -webkit-transition  all 0 3s linear     -moz-transition  all 0 3s linear      fancy-link hover      color   F44336     padding-left  10px      HTML   lt a class  fancy-link  href     gt My Link lt  a gt    And here is a JSFIDDLE for the  all  example

User · Answer

Nowadays people are just using CSS3 transitions because it s a lot easier than messing with JS  browser support is reasonably good and it s merely cosmetic so it doesn t matter if it doesn t work   Something like this gets the job done   a     color blue       First we need to help some browsers along for this to work       Just because a vendor prefix is there  doesn t mean it will      work in a browser made by that vendor either  it s just for      future-proofing purposes I guess       -o-transition  5s    -ms-transition  5s    -moz-transition  5s    -webkit-transition  5s          and now for the proper property      transition  5s    a hover   color red      You can also transition specific CSS properties with different timings and easing functions by separating each declaration with a comma  like so   a     color blue  background white    -o-transition color  2s ease-out  background 1s ease-in    -ms-transition color  2s ease-out  background 1s ease-in    -moz-transition color  2s ease-out  background 1s ease-in    -webkit-transition color  2s ease-out  background 1s ease-in          and now override with proper CSS property      transition color  2s ease-out  background 1s ease-in    a hover   color red  background yellow      Demo here

User · Answer

You can do this with JQueryUI      a   mouseenter function        this  animate       color    ff0000       1000      mouseout function        this  animate       color    000000       1000         http   jsfiddle net dWCbk

User · Answer

Try this in your css    a       transition  color 0 3s ease-in-out     a       color turquoise     a hover       color   454545

[css] Fade Effect on Link Hover?

Examples related to css

Examples related to hover

Examples related to fade

Examples related to effect