小编典典

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

css

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

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


阅读 339

收藏
2020-05-16

共1个答案

小编典典

如今,人们正在使用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; }
2020-05-16