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

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

鼠标移过链接后，HTML超链接保持更改颜色

3 个答案: