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.
$(document).ready(function() {
var COLOR = {
fadeBackground: function(config){
var totalStartPoint= config.startRED+config.startGREEN+config.startBLUE;
var totelEndPoint = config.endRED+config.endGREEN+config.endBLUE;
if(totalStartPoint < totelEndPoint){
var clearTime = setInterval(
function (){
//elem.css("background-color", "rgb("+color.startRED+","+color.startGREEN+","+color.startBLUE+")");
document.getElementById('jsFullAccessColor').style.background ="rgb("+config.startRED+","+config.startGREEN+","+config.startBLUE+")";
if(config.startRED < config.endRED){
config.startRED++;
}
if(config.startGREEN < config.endGREEN){
config.startGREEN++;
}
if(config.startBLUE < config.endBLUE){
config.startBLUE++;
}
if(config.startRED == config.endRED && config.startGREEN == config.endGREEN && config.startBLUE == config.endBLUE){
clearTimer(clearTime);
}
}, config.speed);
}
if(totalStartPoint > totelEndPoint){
var clearTime = setInterval(
function (){
document.getElementById(config.element).style.background ="rgb("+config.startRED+","+config.startGREEN+","+config.startBLUE+")";
if(config.startRED > config.endRED){
config.startRED--;
}
if(config.startGREEN > config.endGREEN){
config.startGREEN --;
}