Цвет фона Hover Fade Effect CSS

Question

Во-первых, я новичок. Я хочу пошаговую инструкцию.

Я хочу добавить плавный фоновый эффект для моих ссылок в Wordpress

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

Я хочу, чтобы зависание на ссылках было медленным, а не мгновенным. Нужен ли мне какой-либо JavaScript или jQuery? Если да, пожалуйста, скажите мне, как это сделать.

Answer 1

Так как это косметический эффект, не должно быть слишком важно, чтобы это срабатывало.Учитывая это, вы можете посмотреть на 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>

Answer 2

Эффект перехода CSS3 будет работать для того, что вы ищете. Вы можете найти больше информации о том, как использовать это здесь: http://www.css3.info/preview/css3-transitions/

Answer 3

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

    });


});

Answer 4

Вы не можете анимировать цвет фона, пока не используете плагин. Плагин разработан тем же человеком, который создал jQuery, хотя: http://plugins.jquery.com/project/color

Он просто не включил его, потому что это сделало бы файл js больше.

Примечание: вы можете изменить непрозрачность.

Answer 5

Примечание. Это было написано до того, как 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>