HTML hyperlink remain changed color after mouse has moved over link

Question

I was wondering, I have links that change blue when a mouse hovers over them. Would it be possible to make them remain blue a few seconds after the mouse has moved away? I'm guessing this would be possible with jquery? Thanks!

Answer 1

Sure! If you want to have the link fade out, you'll need jQuery UI to animate the color:

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

Animate docs: http://api.jquery.com/animate/

Answer 2

demo

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

demo

Answer 3

An alternative might be the CSS transition-duration property. This won't keep it a solid color for the specified time but it can allow a transition from one color to another to take a number of seconds for example. This may not be supported by some browsers visiting the page so the other answers using jQuery are great for that.

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

a:hover {
    color: blue;
}