As I’m sure you know, it’s very easy to set a different colour for a link when a user hovers over it using the :hover pseudo class – it’s used pretty much everywhere.

However, wouldn’t it be nice if instead of jumping sharply from one colour to another, the colours subtly fades from one to another and back again? Fortunately I have written a very simple plugin to do just that!

This plugin subtly fades from the default colour of the element to the specified colour when a user hovers over it, and back again when the user leaves the element.

Demonstration


EXAMPLE LINK 1
EXAMPLE LINK 2 – SLOW FADE BACK

Using the plugin

This plugin required the color animations official jquery plugin, available at http://plugins.jquery.com/project/color. This must be included on the page before the plugin is included.

To use the plugin, simple use the following code:

$('a').hoverFadeColor();

This will make all the links on a page fade to the color specified in the css:hover style and back again.

The options are as follows:

  • color: the color to fade to on hover. This can be any css color, rgb value or hexadecimal value. If it is not specified, the plugin will use the default css hover value.
  • fadeTospeed (default 300): the rate at which the element fades to the hover color
  • fadeFromspeed (default 700) is the rate at which the element fades to the default color

Download

Version 1.1. Released 29 June 2011