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.

Answer 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>

Answer 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/

Answer 3

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:

<SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></SCRIPT>

Then:

<SCRIPT type="text/javascript">
$(function() {
  $('a').hover(
   function() { $(this).animate( { backgroundColor: '#d1d1d1', color: '#fff' } ) },
   function() { $(this).animate( { backgroundColor: '',        color: ''     } ) }
  );
});
</SCRIPT>

Answer 4

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.

Answer 5

$(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 --;
                                }
                        if(config.startBLUE > config.endBLUE){ 
                                config.startBLUE--;
                                }
                          if(config.startRED == config.endRED && config.startGREEN == config.endGREEN && config.startBLUE == config.endBLUE){               
                                clearTimer(clearTime);

                                }

                    }, config.speed); 

                 }
         }

    }

    function clearTimer(timerId){   
        clearInterval (timerId);
             }

    $(".domEleement").on("click",function (){

        var config ={
                //color starting point
                startRED:172,
                startGREEN:210,
                startBLUE:247,
                //color end point
                endRED:255,
                endGREEN:255,
                endBLUE:255,
                //element 
                element:"jsFullAccessColor",
                //speed
                speed:20

            }
            COLOR.fadeBackground(config);

    });


});