当前位置：文江博客话题详情

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

发布于 2024-09-07 13:17:56 字数 73 浏览 5 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

写给空气的情书 2024-09-14 13:17:56

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

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

a:hover {
    color: blue;
}

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

回复收藏 0 原文

南烟 2024-09-14 13:17:56

演示

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

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

回复收藏 0 原文

漫雪独思 2024-09-14 13:17:56

当然！如果您想让链接淡出，则需要 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
  }
);

Animate 文档： http ://api.jquery.com/animate/

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/

回复收藏 0 原文

~没有更多了~