鼠标移到链接上后，HTML 超链接的颜色保持不变答案

【问题标题】：HTML hyperlink remain changed color after mouse has moved over link鼠标移到链接上后，HTML 超链接的颜色保持不变
【发布时间】：2011-03-10 22:35:19
【问题描述】：

我想知道，当鼠标悬停在链接上时，链接会变成蓝色。是否有可能在鼠标移开几秒钟后使它们保持蓝色？我猜这可以用jquery来实现吗？谢谢！

【问题讨论】：

标签： jquery html css hover hyperlink

【解决方案1】：

另一种方法可能是 CSS 过渡持续时间属性。这不会让它在指定时间内保持纯色，但它可以允许从一种颜色到另一种颜色的转换需要几秒钟的时间。访问该页面的某些浏览器可能不支持此功能，因此使用 jQuery 的其他答案非常适合。

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

a:hover {
    color: blue;
}

【讨论】：

是的，它没那么重要。这在 FF 和 Chrome 中效果很好。够了 :) 谢谢！

【解决方案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

【讨论】：

很好，我要用这个！
有什么办法让它淡出，而不是在 1000 毫秒后切换回来？（对不起，我没有提到问题）

【解决方案3】：

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

【讨论】：

您需要 jQuery UI 来为颜色设置动画。
使用另一个插件来完成一个简单的任务？我真的认为你需要 jQuery UI 来解决这个问题......
嗯，有趣！我似乎无法让它工作。这看起来正确吗？ pastebin.com/4MYJD3mD（如你所知，我是 jquery 的菜鸟。我需要安装 jQuery Ui 插件吗？
是的，要使用我的解决方案，您需要安装 UI 插件，或者使用上面 Reigel 发布的 mouseOut 函数的 setTimeout 版本。你可以在这里看到它的实际效果：jsfiddle.net/mXkXn
CSS3也有过渡规则，当然它只适用于支持它的浏览器。