Hintergrundfarbe Hover-Fade-Effekt CSS

Erstens bin ich Anfänger. Ich möchte eine Schritt-für-Schritt-Anleitung.

Ich möchte meinen Links einen sanften Hintergrund-Hover-Effekt hinzufügen WordPress

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

Ich möchte, dass der Hover auf Links langsam statt sofort erfolgt. Benötige ich JavaScript oder jQuery? Wenn ja, sagen Sie mir bitte, wie das geht.

Da dies ein kosmetischer Effekt ist, sollte es nicht zu wichtig sein, dass dieser feuert. In Anbetracht dessen sollten Sie sich CSS 3 ansehen Transformationen.

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

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

Der CSS3-Übergangseffekt würde für das funktionieren, wonach Sie suchen. Weitere Informationen zur Verwendung finden Sie hier: http://www.css3.info/preview/css3-transitions/

Sie können die Hintergrundfarbe erst animieren, wenn Sie ein Plug-in verwenden. Das Plug-In wurde jedoch von demselben Typ entworfen, der jQuery erstellt hat: http://plugins.jquery.com/project/color

Er hat es einfach nicht aufgenommen, weil es die js-Datei größer gemacht hätte.

Hinweis: Sie können die Deckkraft jedoch ändern.

Hinweis: Dies wurde geschrieben, bevor CSS-Übergänge allgemein verfügbar waren (sie waren gerade erschienen und die Browserunterstützung war unzureichend). Wenn Sie dies heute getan haben, verwenden Sie CSS-Übergänge und kein Javascript.

Ja, Sie benötigen Javascript. jQuery macht es einfacher.

Ich bin mir nicht sicher, ob Sie das als Anfänger tun sollten, aber:

Sie müssen die jQuery-Bibliothek in ein Skript-Tag einfügen:

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

Dann:

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

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

    });


});