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.
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.
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/
You cannot animate the background color until you use a plug-in. The plug in is designed by the same guy who created jQuery though: http://plugins.jquery.com/project/color
He just didn’t include it because it would have made the js file bigger.
Note: you can change the opacity though.
Note: This was written before CSS transitions were widely available (they had just come out, and browser support was insufficient). If you were doing this today then use CSS transitions, and not javascript.
Yes, you need javascript. jQuery makes it easier.
I’m not so sure you should be doing that as a beginner, but:
You will need to include the jQuery library in a script tag:
Then: