137

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?

GEOCHET
  • 21,119
  • 15
  • 74
  • 98
Miles Henrichs
  • 2,300
  • 3
  • 20
  • 23
  • 1
    Thank you. Now, I understand how to make hover links, it's just that I'm trying to figure out how to create a smoother effect for my hover links. – Miles Henrichs May 15 '11 at 12:36

4 Answers4

334

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

Marcel
  • 27,922
  • 9
  • 70
  • 85
  • @AndreiCristof: Luckily [works in IE10 though](http://msdn.microsoft.com/en-us/library/ie/hh673535(v=vs.85).aspx)! No vendor prefix required either (which is weird). – Marcel Dec 01 '12 at 23:16
  • I tested both and i hope if i found correct reason that CSS way is not smooth and fluent as jQuery way. Please correct me if i'm wrong. – QMaster Jan 21 '14 at 15:25
  • You rock! Well explained, helped me out a lot by seeing it. – plast1K May 17 '14 at 00:11
  • My test is with an image, not a link. – Felipe Feb 10 '15 at 03:33
  • @FelipeMicaroniLalli best to post a question I guess, definitely sounds like a syntax problem. – Marcel Feb 10 '15 at 07:25
9

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

<a class="fancy-link" href="#">My Link</a>

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

<a class="fancy-link" href="#">My Link</a>

And here is a JSFIDDLE for the "all" example!

TURTLE
  • 3,728
  • 4
  • 49
  • 50
6

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/

Niclas Sahlin
  • 1,125
  • 9
  • 15
  • you dont need jqueryui for that, just jquery – chesscov77 Apr 18 '14 at 18:10
  • 6
    @Juan No, jQuery can only animate "single numeric values" which colors are not (see https://api.jquery.com/animate/#animation-properties). But you actually don't need the entire jQueryUI library, just the jQuery.Color plugin, that happens to be embedded into jQueryUI. – Niclas Sahlin Apr 18 '14 at 18:42
  • @Niclas Sahlin. I found your fiddle searching for CSS transitions. Your JQuery-UI transition is so much smoother, I'm sure the users will notice it. – RubyRube Jun 06 '17 at 19:45
  • 1
    There are solutions with css, which is way easier to implement – mhenkel Dec 12 '17 at 14:50
3

Try this in your css:

.a {
    transition: color 0.3s ease-in-out;
}
.a {
    color:turquoise;
}
.a:hover {
    color: #454545;
}
Dylan
  • 31
  • 3