[CSS] 滑鼠移至文字上漸變顏色

最近發現到很多網站都有使用這樣的功能，尤其是使用WordPress或Blogger的部落客，由於CSS的自由度高，對於網站的精緻程度也會要求更臻完美，在這些部落格的首頁上，滑鼠移到文章的標題時，會發現標題的文字從黑色漸漸變成淡藍或橘色，或任何和他們的網站風格匹配的顏色，感覺蠻生動的，所以我就去Google了一下啦，原來這樣的功能只需要CSS的幾句語法就可以實現。

滑鼠移過文字，會觸發顏色變化，但這中間有延遲的時間，這是CSS3的語法，雖然酷炫，不過不是每個瀏覽器都支援，尤其是古早味的IE，版本9以下。不過我想現在就算還有死忠的IE迷，也不會再用早期的版本吧。

本篇文章的語法及參考解釋來自 – 樂在設計

而這個神祕的CSS語法，就是transition，以下是它的參數設定簡單的介紹。

參數設定

transition: [屬性] [變換持續時間] [變換效果] [延遲時間];

[屬性](property)：指定效果要套用在哪個屬性上，如文字顏色color，背景顏色background。

[變換持續時間](duration)：如果設為0就與原本相同，設越大則變換持續時間越長。

[變換效果](timing-function)：見下一節。

[延遲時間](delay)：在變換顏色之前的延遲時間，可不設定。

變換效果

• linear：均速
• ease：很快→漸慢
• ease-in：漸漸變快
• ease-out：漸漸變慢
• ease-in-out：漸快→慢下來→漸快
• cubic-bezier( 0.1, 0.5 , 0.1 , 0.5)：其中的0.1及0.5可以調整成其他小數，這代表貝賽爾曲線的4個點值。

a{
    color: #06c;
}
a:hover{
    color:#5AA0E6;
    -o-transition: color .20s linear;
    -webkit-transition: color .20s linear;
    -moz-transition: color .20s linear;
    transition:  color .20s linear;
}