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

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

Answer 3

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

是的，你需要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 4

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

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

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

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

    });


});

背景颜色悬停渐变效果CSS

5 个答案: