背景颜色悬停淡化效果 CSS答案

【问题标题】：Background Color Hover Fade Effect CSS背景颜色悬停淡化效果 CSS
【发布时间】：2011-10-23 02:33:19
【问题描述】：

首先，我是初学者。我想要一步一步的指导。

我想在 Wordpress 中为我的链接添加平滑的背景悬停效果

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

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

【问题讨论】：

你可以参考这个stackoverflow.com/questions/1750380/gradually-changing-color

标签： javascript jquery css wordpress background

【解决方案1】：

由于这是一种装饰效果，因此触发它应该不是太重要。鉴于此，您可能想查看 CSS 3 transformations。

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

&lt;a href="http://example.com"&gt;Hover me&lt;/a&gt;

【讨论】：

如果“-ms”不代表微软，它代表什么？感谢这段小代码。我知道过渡，但它让我对如何使用它大开眼界。
一般是IE10。所以是的 ms = microsoft 但 IE10 以下不支持更高级的 CSS 功能。

【解决方案2】：

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

    });


});

【讨论】：

【解决方案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>

【讨论】：

afaik，我认为您还应该需要 jquery-ui 才能为背景颜色设置动画
使用 github.com/jquery/jquery-color 。一个 jQuery 插件来控制关于颜色的一切。很不错。（不过我个人更喜欢 CSS3 过渡）

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

很多人为 JQuery 做出了贡献，不仅仅是“一个人”。此外，JQuery 对此完全矫枉过正。