背景颜色悬停渐变效果CSS

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

我想在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.

我希望链接上的悬停缓慢而不是即时。我需要任何JavaScript或jQuery吗？如果是这样，请告诉我该怎么做。

5 个解决方案

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

由于这是一种美容效果，因此它不应过于重要。鉴于此，您可能希望查看CSS 3转换。

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

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

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

CSS3 Transition效果可以满足您的需求。您可以在此处找到有关如何使用它的更多信息：http：//www.css3.info/preview/css3-transitions/

#3

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

在使用插件之前，无法为背景颜色设置动画。插件是由创建jQuery的同一个人设计的：http：//plugins.jquery.com/project/color

He just didn't include it because it would have made the js file bigger.

他只是没有包含它，因为它会使js文件更大。

Note: you can change the opacity though.

注意：您可以更改不透明度。

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

注意：这是在CSS转换广泛可用之前编写的（它们刚刚问世，浏览器支持不足）。如果你今天这样做，那么使用CSS转换，而不是javascript。

Yes, you need javascript. jQuery makes it easier.

是的，你需要javascript。 jQuery使它更容易。

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:

您需要在脚本标记中包含jQuery库：

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

    });


});