用於淡化背景顏色的CSS動畫

有沒有辦法讓一個按鈕的背景色從一個顏色改變到另一個具有淡入淡出效果的懸停？我知道這可以在JavaScript中完成，但我寧願只使用CSS來做到這一點。用於淡化背景顏色的CSS動畫

2012-06-08 user1444021

「懸停CSS背景變化」有進近。 2,8mio點擊... – Christoph

.btn { 
    background-color: lightblue; 
    -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */ 
    -moz-transition: all 0.3s ease-out; /* FF4+ */ 
     -ms-transition: all 0.3s ease-out; /* IE10 */ 
     -o-transition: all 0.3s ease-out; /* Opera 10.5+ */ 
      transition: all 0.3s ease-out; 
} 

.btn:hover { 
    background-color: lightgreen; 
}

來源

2012-06-08 08:44:41

謝謝。它工作正常。在IE9中可以這樣做嗎？ – user1444021

是的，我認爲。看到這個[線程]（http://stackoverflow.com/questions/7933062/ie-9-css3-transition-effect-cheats）。 –

+1爲-ms-，因爲我不知道那個。 – SpaceBeers

-1

試試這個CSS，

button{background-color:#888;} 
button:hover{background-color:#CCC;}

HTML是，

<button>Test</button>

工作代碼：http://jsfiddle.net/HJmK9/

來源

2012-06-08 08:46:09

用於淡化背景顏色的CSS動畫

回答

相關問題