鼠标移过链接后，HTML超链接保持颜色变化

Question

我想知道，当鼠标悬停在它们上方时，我有链接变蓝。在鼠标移开几秒之后，它们能够保持蓝色吗？我猜这可能与jQuery的？谢谢！

Answer 1

另一种可能是CSS过渡期间财产。这不会让它在指定的时间内保持纯色，但它可以允许从一种颜色转换到另一种颜色，例如需要几秒钟。这可能不被某些浏览器访问页面所支持，所以使用jQuery的其他答案对此很有帮助。

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

a:hover { 
    color: blue; 
} 

Answer 2

当然！如果你想有链接淡出，你需要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/

Answer 3

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