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

Posted 2023-05-08

【中文标题】鼠标移到链接上后，HTML 超链接的颜色保持不变

【英文标题】：HTML hyperlink remain changed color after mouse has moved over link

【发布时间】：2011-03-10 22:35:19

【问题描述】：

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

【参考方案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也有过渡规则，当然它只适用于支持它的浏览器。