CSS3淡入淡出而不是滑動？

Question

繼承人我CSS：

#display { 
    background: url('/src/images/icons/display.png') no-repeat 0 0; 
    margin-right: 10px; 
    height: 49px; 
    width: 49px; 
    float: left; 
    -moz-transition-property: all; 
    -webkit-transition-property: all; 
    -o-transition-property: all; 
    transition-property: all; 
    -moz-transition-duration: 0.3s; 
    -webkit-transition-duration: 0.3s; 
    -o-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
} 

#display:hover{ 
    background: url('/src/images/icons/display.png') no-repeat 0 -49px; 
} 

與#display爲錨的ID，當我在它懸停，而不是它下面的幻燈片將其衰落到精靈49個像素..反正讓它褪色？

Answer 1

這樣做，這將是如下的純CSS方式：

#display { 
    background: url('/src/images/icons/display.png') no-repeat 0 0; 
    margin-right: 10px; 
    height: 49px; 
    width: 49px; 
    float: left; 
} 

#display:after { 
    content: ""; 
    display: block; 
    background: url('/src/images/icons/display.png') no-repeat 0 -49px; 
    margin-right: 10px; 
    height: 49px; 
    width: 49px; 
    float: left; 
     opacity: 0; 
-webkit-transition-property: opacity; 
    -moz-transition-property: opacity; 
    -o-transition-property: opacity; 
    -ms-transition-property: opacity; 
     transition-property: opacity; 
-webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s; 
    -o-transition-duration: 0.3s; 
    -ms-transition-duration: 0.3s; 
     transition-duration: 0.3s; 
} 

#display:after:hover { 
    opacity: 1; 
} 

這段代碼的作用是使用CSS3：僞元素後，基本上建立在上面一個全新的形象，然後淡出，從當它懸停時透明不透明。

唯一的問題是，Firefox是目前唯一支持淡入淡出的瀏覽器：之前和之後：僞元素。

如果你有一個內部的子元素（如DIV或元素），你可以這樣做，而不是：

#display { 
    background: url('/src/images/icons/display.png') no-repeat 0 0; 
    margin-right: 10px; 
    height: 49px; 
    width: 49px; 
    float: left; 
} 

#display a { 
    display: block; 
    background: url('/src/images/icons/display.png') no-repeat 0 -49px; 
    height: 49px; 
    width: 49px; 
    float: left; 
     opacity: 0; 
-webkit-transition-property: opacity; 
    -moz-transition-property: opacity; 
    -o-transition-property: opacity; 
    -ms-transition-property: opacity; 
     transition-property: opacity; 
-webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s; 
    -o-transition-duration: 0.3s; 
    -ms-transition-duration: 0.3s; 
     transition-duration: 0.3s; 
} 

#display:hover a { 
    opacity: 1; 
} 

希望幫助:)

Answer 2

我不完全確定你在問什麼，但它讀取就像你要求幫助淡化顏色變化？如果這是這樣：

#test { 
    background-color: #fff; 
    -webkit-transition: background-color 2s linear; 
    -moz-transition: background-color 2s linear; 
    -o-transition: background-color 2s linear; 
    -kthml-transition: background-color 2s linear; 
    transition: background-color 2s linear; 
} 
#test:hover { 
    background-color: #f90; 
    -webkit-transition: background-color 2s linear; 
    -moz-transition: background-color 2s linear; 
    -o-transition: background-color 2s linear; 
    -kthml-transition: background-color 2s linear; 
    transition: background-color 2s linear; 
    -webkit-transition: background-color 2s linear; 
} 

JS Fiddle demo。

在另一方面，如果你希望它消失的元素：

#test { 
    background-color: #fff; 
    opacity: 0; 
    -webkit-transition: opacity 2s linear; 
    -moz-transition: opacity 2s linear; 
    -o-transition: opacity 2s linear; 
    -kthml-transition: opacity 2s linear; 
    transition: opacity 2s linear; 
    -webkit-transition: opacity 2s linear; 
} 
#test:hover { 
    background-color: #f90; 
    opacity: 1; 
    -webkit-transition: opacity 2s linear; 
    -moz-transition: opacity 2s linear; 
    -o-transition: opacity 2s linear; 
    -kthml-transition: opacity 2s linear; 
    transition: opacity 2s linear; 
    -webkit-transition: opacity 2s linear; 
} 

JS Fiddle demo。