给锚文本(a:hover)颜色变换增加延迟效果

洪七公

经常在网站上，特别是国外的网站看到一种颜色变换的效果，就是当鼠标经过链接时，颜色不是马上变化，而是有一个延迟过渡的效果。

例如我们正常对锚链接的做法是

1. a{background:#fff;}
   
2. a:hover{background:#ccc;}

复制代码

链接背景默认为白色，当鼠标经过该链接时，背景颜色马上就变成灰尘色。

要增加一个延迟过渡效果需要给a增加以下CSS代码：

1. -webkit-transition: all 0.4s;-moz-transition: all 0.4s;-o-transition: all 0.4s;

复制代码

0.4s表示变换时间为0.4秒

改完之后CSS代码为：

1. a{background:#fff;-webkit-transition: all 0.4s;-moz-transition: all 0.4s;-o-transition: all 0.4s; }
   
2. a:hover{background:#ccc;}

复制代码

经测试，该效果在Chrome,IE10均有效，IE6无效。其它浏览器未测试。