HTML-гиперссылка остается измененного цвета после того, как мышь наведена на ссылку

Question

Мне было интересно, у меня есть ссылки, которые меняют синий цвет, когда на них наводит курсор мыши. Можно ли заставить их оставаться синими через несколько секунд после того, как мышь уберется? Я предполагаю, что это было бы возможно с jquery? Спасибо!

Answer 1

Альтернативой может быть свойство CSS transition-duration.Это не будет сохранять его сплошным цветом в течение указанного времени, но может позволить переход от одного цвета к другому, например, на несколько секунд.Это может не поддерживаться некоторыми браузерами, посещающими страницу, поэтому другие ответы, использующие jQuery, отлично подходят для этого.

a {
    color: red;
    transition-duration: 5s;
    -moz-transition-duration: 5s;
    -webkit-transition-duration: 5s;
}

a:hover {
    color: blue;
}

Answer 2

демо

CSS

a {
  color: red;
}

a.blue {
  color: blue;
}

HTML

<a href="index.html">home</a>

JQuery

$(document).ready(function(){
   $('a').hover(function(){
       $(this).addClass('blue');
   },
   function(){
       var link = $(this);
       setTimeout(function(){link.removeClass('blue');},1000); 
   })
})

демо

Answer 3

* 1000 Конечно *! Если вы хотите, чтобы ссылка исчезла, вам понадобится jQuery UI для анимации цвета:

$('#myLinkId').hover(
  function(e){
    //mouseover
    $(this).css('color','blue');
  },
  function(e){
    //mouseout
    $(this).animate({color:'black'},300); //300 is the speed of the animation in ms
  }
);

Анимированные документы: http://api.jquery.com/animate/