2013-01-16 140 views
31

我想讓這個h3淡入淡出。有人可以幫我嗎?懸停時過渡顏色淡化?

HTML

<h3 class="clicker">test</h3> 

CSS

.clicker { 
    -moz-transition:color .2s ease-in; 
    -o-transition:color .2s ease-in; 
    -webkit-transition:color .2s ease-in; 
    background:#f5f5f5;padding:20px; 
} 

.clicker:hover{ 
    background:#eee; 
} 
+0

你是指'fade'隱藏的嗎? – Ovilia

+0

我只希望它從#f5f5f5褪色到#eee – J82

回答

65

你要淡出呢? backgroundcolor屬性?

當前你正在改變背景顏色,但是告訴它轉換顏色屬性。您可以使用all轉換所有屬性。

.clicker { 
    -moz-transition: all .2s ease-in; 
    -o-transition: all .2s ease-in; 
    -webkit-transition: all .2s ease-in; 
    transition: all .2s ease-in; 
    background: #f5f5f5; 
    padding: 20px; 
} 

.clicker:hover { 
    background: #eee; 
} 

否則只是使用transition: background .2s ease-in

+0

謝謝!我會在一分鐘內接受你的回答。 – J82