在许多网站例如上,您会注意到,当链接悬停在链接上时,它们将淡化为其他颜色,而不是立即切换(默认操作)。
我假设使用JavaScript来创建这种效果,有人知道吗?
如今,人们正在使用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; }