javascript - how to animate color of a link on hover - Stack Overflow

admin管理员组

文章数量:1401362

i've few types of links on my website.

First is just simple link without any styles such as backgrounds. The second type of links are with background colors similar to buttons.

these both have hover color change effect which is acplished by CSS.

what i want is to animate that color change on hover, i want it to change smoothly.

is there any way to white a few line of code in master page of all other pages, so ever single link will animate its color change on hover?

Thanks in advance.

i've few types of links on my website.

First is just simple link without any styles such as backgrounds. The second type of links are with background colors similar to buttons.

these both have hover color change effect which is acplished by CSS.

what i want is to animate that color change on hover, i want it to change smoothly.

is there any way to white a few line of code in master page of all other pages, so ever single link will animate its color change on hover?

Thanks in advance.

• javascript
• jquery
• css

Share Improve this question Follow asked May 10, 2013 at 19:49 ZafarZafar 43911 gold badge1212 silver badges2020 bronze badges 1

• See stackoverflow./questions/6008324/fade-effect-on-link-hover - the accepted answer shows how to achieve this with CSS transitions. – Paul Roub Commented May 10, 2013 at 19:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

The simplest way to do this is to use CSS3 transitions on the background-color property.

For example:

a {
    background-color: blue;
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -o-transition: background-color 1s;
    transition: background-color 1s;
}
a:hover {
    background-color: red;
}

Note that this won't work in all browsers (e.g. IE8).

For more examples see https://developer.mozilla/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

This is possible with jQuery (via 3rd party plugins that exist), OR css3 transitions.

Fiddle: http://jsfiddle/ZKXWg/

HTML

<a href="#">Hover me</a>

CSS

a,
a:hover {
    -webkit-transition: color ease-in-out 800ms;
    color: red;
}

a:hover {
    color: blue;
} 

I've only included the -webkit vendor prefix, but applicable prefixes should be added/used.

Try using css3 transition property.

DEMO: http://jsfiddle/XjEC9/

a { 
   background-color: blue; 
   color: white; 
   transition-property: background-color, color; 
   transition-duration: 2s; 
   transition-timing-function: ease; 
}

a:hover { color: red; background-color: green; }

本文标签： javascripthow to animate color of a link on hoverStack Overflow