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

31

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

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

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

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

Теги:
background

5 ответов

78
Лучший ответ

Поскольку это косметический эффект, он не должен быть слишком важным, чтобы это срабатывало. Учитывая это, вы можете посмотреть на преобразования 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>
Поделиться
  • 0
    не для IE в любом случае спасибо, я не знал об этом раньше.
  • 1
    Что означает "-ms", если это не означает Microsoft? Спасибо за этот маленький кусочек кода. Я знал переходы, но это открыло мне глаза на то, как его использовать.
Показать ещё 1 комментарий
1

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

Поделиться
-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);

    });


});
Поделиться
  • 3
    -1: нет объяснений и плохое форматирование кода.
-5

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

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

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

Поделиться
  • 0
    Многие люди вносят свой вклад в JQuery, это не просто «один парень». Кроме того, JQuery полностью излишним для этого.
-5

Примечание. Это было написано до того, как переходы CSS были широко доступны (они только что вышли, а поддержка браузера была недостаточной). Если вы делали это сегодня, используйте CSS-переходы, а не javascript.

Да, вам нужен javascript. jQuery упрощает работу.

Я не уверен, что вы должны делать это как новичок, но:

Вам нужно будет включить библиотеку jQuery в тег script:

<SCRIPT type="text/javascript" src="/jquery.min.js"></SCRIPT>

Тогда:

<SCRIPT type="text/javascript">
$(function() {
  $('a').hover(
   function() { $(this).animate( { backgroundColor: '#d1d1d1', color: '#fff' } ) },
   function() { $(this).animate( { backgroundColor: '',        color: ''     } ) }
  );
});
</SCRIPT>
Поделиться
  • 1
    afaik, я думаю, тебе также понадобится jquery-ui, чтобы иметь возможность анимировать цвет фона
  • 0
    не работает ?? любое решение
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню