Background Color Hover Fade Effect CSS

Question

First, I am a beginner. I want a step by step instruction.

I want to add a smooth background hover effect to my links in Wordpress

a {
  color:#000;}
a:hover {
  background-color: #d1d1d1; color:#fff;
}

I want the hover on links slow, instead of instant. Do I need any JavaScript or jQuery ? If so, please tell me how to do that.

Solution 1

Since this is a cosmetic effect, it shouldn't be too vital that this fires. Given that, you might want to look at CSS 3 transformations.

a {
  color: #000;
  transition: background 0.5s linear;
}
a:hover {
  background-color: #d1d1d1;
  color: #fff;
}

<a href="http://example.com">Hover me</a>

Solution 2

The CSS3 Transition effect would work for what you are looking for. You can find more info on how to use it here: http://www.css3.info/preview/css3-transitions/