淡入淡出对链接悬停有影响吗?


134

在许多站点(例如http://www.clearleft.com)上,您会注意到,当链接悬停在链接上时,它们将淡化为其他颜色,而不是立即切换(默认操作)。

我假设使用JavaScript来创建这种效果,有人知道吗?


1
谢谢。现在,我了解了如何制作悬停链接,只是我想弄清楚如何为悬停链接创建更平滑的效果。
Miles Henrichs

Answers:


327

如今,人们只是在使用CSS3过渡,因为它比使用JS变得容易得多,浏览器支持也相当不错,而且仅仅是装饰性的,因此不管它是否起作用都无关紧要。

这样的事情可以完成工作:

a {
  color:blue;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}
a:hover { color:red; }

您还可以通过用逗号分隔每个声明来以不同的时间和缓动函数来转换特定的CSS属性,如下所示:

a {
  color:blue; background:white;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }

在这里演示


@AndreiCristof:幸运的是,虽然可以在IE10中工作!也不需要供应商前缀(很奇怪)。
马塞尔(Marcel)2012年

我对两者都进行了测试,希望我能找到正确的理由证明CSS方法不像jQuery方法那样流畅流畅。如果我错了,请纠正我。
QMaster 2014年

你摇滚!很好的解释,看到它对我有很大帮助。
plast1K 2014年

我的测试是针对图片而不是链接。
费利佩2015年

@FelipeMicaroniLalli最好张贴一个我猜的问题,听起来绝对是语法问题。
Marcel

9

我知道在问题中您说“我假设使用JavaScript来创建此效果”,但也可以使用CSS,下面是一个示例。

的CSS

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: color 0.3s linear;
   -webkit-transition: color 0.3s linear;
   -moz-transition: color 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
}

的HTML

<a class="fancy-link" href="#">My Link</a>

这是上述代码的JSFIDDLE


Marcel在其中一个答案中指出,您可以“转换多个CSS属性”,也可以使用“ all”以所有如下所示的:hover样式来影响元素。

的CSS

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: all 0.3s linear;
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
   padding-left: 10px;
}

的HTML

<a class="fancy-link" href="#">My Link</a>

这是“所有”示例的JSFIDDLE


6

您可以使用JQueryUI执行此操作:

$('a').mouseenter(function(){
  $(this).animate({
    color: '#ff0000'
  }, 1000);
}).mouseout(function(){
  $(this).animate({
    color: '#000000'
  }, 1000);
});

http://jsfiddle.net/dWCbk/


你不需要jQueryUI的为,只是jQuery的
胡安

6
@Juan不,jQuery只能为没有颜色的“单个数值”设置动画(请参阅api.jquery.com/animate/#animation-properties)。但是实际上,您不需要整个jQueryUI库,只需要恰好嵌入到jQueryUI中的jQuery.Color插件即可。
Niclas Sahlin

@尼古拉斯·萨林 我发现您的小提琴正在搜索CSS过渡。您的JQuery-UI过渡非常顺畅,我相信用户会注意到它。
RubyRube

1
有CSS的解决方案,更容易实现
mhenkel

2

在您的CSS中尝试以下操作:

.a {
    transition: color 0.3s ease-in-out;
}
.a {
    color:turquoise;
}
.a:hover {
    color: #454545;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.