Hintergrundfarbe Hover Fade-Effekt CSS

Ersten, ich bin ein Anfänger. Ich möchte ein Schritt-für-Schritt-Anleitung.

Möchte ich hinzufügen, dass ein glatter hintergrund-hover-Effekt für meine links in WordPress

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

Möchte ich den hover auf links, langsam, anstatt sofort.
Brauche ich irgendwelche JavaScript-oder jQuery ? Wenn ja, bitte sagen Sie mir, was zu tun ist.

InformationsquelleAutor der Frage anupal | 2011-08-09

  1. 1

    CSS3 Transition Effekt funktionieren würde, für das, was Sie suchen. Sie finden mehr Informationen über, wie zu benutzen es hier: http://www.css3.info/preview/css3-transitions/

    InformationsquelleAutor der Antwort Blake Clerke

  2. -4

    Können Sie nicht animieren der Hintergrundfarbe, bis Sie ein plug-in. Das plug-in wurde von der gleichen Kerl, der erstellt jQuery wenn: http://plugins.jquery.com/project/color

    Er wollte sich einfach nicht gehören, weil es gemacht haben würde, die js-Datei größer.

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

    InformationsquelleAutor der Antwort rkw

  3. -4

    Anmerkung: Dies wurde geschrieben, bevor der CSS-übergänge wurden weithin verfügbar zu machen (Sie hatte sich gerade aus, und browser-support war nicht ausreichend). Wenn Sie dies Taten heute dann verwenden Sie CSS-übergänge, und nicht javascript.

    Ja, Sie müssen javascript. jQuery macht es einfacher.

    Bin ich mir nicht so sicher, dass Sie tun sollten, als ein Anfänger, aber:

    Müssen Sie include der jQuery-Bibliothek in eine script-tag:

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

    InformationsquelleAutor der Antwort Ariel

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

    });


});

    InformationsquelleAutor der Antwort Yene Mulatu

Schreibe einen Kommentar