バックグラウンドカラーホバーフェード効果CSS

Question

まず、私は初心者です。私はステップバイステップの指示をしたい。

私はWordpressので私のリンクに円滑な背景ホバー効果を追加したい

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

私の代わりにインスタントの、低速リンク上でホバーしたいです。 JavaScriptまたはjQueryが必要ですか？もしそうなら、どうすればいいか教えてください。

Answer 1

これは化粧品の効果であるため、このことがあまりにも重要ではありません。それで、あなたは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

注：これは、CSSトランジションが広く利用できるようになる前に書かれました（出てきたばかりで、ブラウザのサポートは不十分でした）。あなたが今日これをやっていたら、JavaScriptのトランジションではなくCSSのトランジションを使用してください。

はい、javascriptが必要です。 jQueryにより簡単にできます。

私はあなたが初心者としてそれを行うべきであるので、わからないんだけど、：あなたはスクリプトタグでjQueryライブラリを含める必要があります

：

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

その後：

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

Answer 3

あなたはプラグインを使用するまでは、背景色をアニメーション化することはできません。プラグインは、jQueryを作成したのと同じ人が設計しています。http://plugins.jquery.com/project/color

jsファイルを大きくしてしまったため、プラグインが含まれていません。

注：ただし、不透明度を変更することはできます。

Answer 4

あなたが探しているものに対してCSS3遷移効果が作用します。あなたはここでそれを使用する方法の詳細情報を見つけることができます。http://www.css3.info/preview/css3-transitions/

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

    }); 


});