背景颜色悬停淡出效果CSS

Background Color Hover Fade Effect CSS

本文关键字：CSS 淡出 颜色 悬停 背景      更新时间：2023-09-26

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

我想添加一个平滑的背景悬停效果到我的链接在Wordpress

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

我希望悬停在链接慢，而不是即时。我需要JavaScript或jQuery吗?如果是，请告诉我怎么做

由于这是一种装饰效果，因此它应该不是太重要。考虑到这一点，你可能想看看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>

CSS3过渡效果将为您正在寻找的工作。你可以在这里找到更多关于如何使用它的信息:http://www.css3.info/preview/css3-transitions/

除非使用插件，否则无法使背景颜色具有动画效果。这个插件是由创建jQuery的同一个人设计的:http://plugins.jquery.com/project/color

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

注意:你可以改变不透明度

注意:这是在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>

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

});
相关文章：