Background Color Hover Fade Effect CSS

2 Views

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

Read More
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.

Post Views: 2

Related posts

Leave a Reply

5 comments

  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>

  4. 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>

  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);

    });


});