如何在懸停上設置轉換

Question

我想設置懸停時的不透明轉換，但無法理解方式。任何幫助都會被激活。

<div><img src="http://codezona.com/wp-content/uploads/2013/03/rusalkasmall.jpg" alt=""></div> 
img { 
display:block; 
} 
div { 
    position:relative; 
} 

div:hover:before { 
    content:""; 
    opacity:0.1; 
    position:absolute; 
    width:170px; 
    height:100px; 
    background:#ebe316; 
} 

DEMO

Answer 1

使用CSS3過渡。這裏有一個小提琴的例子，所以你可以看到它的工作。

#on-hover { 
    opacity:0; 
    /* Firefox */ 
    -moz-transition-property: opacity; 
    -moz-transition-duration: 2s; 
    -moz-transition-delay: 1s; 
    /* WebKit */ 
    -webkit-transition-property: opacity; 
    -webkit-transition-duration: 2s; 
    -webkit-transition-delay: 1s; 
    /* Opera */ 
    -o-transition-property: opacity; 
    -o-transition-duration: 2s; 
    -o-transition-delay: 1s; 
    /* Standard */ 
    transition-property: opacity; 
    transition-duration: 2s; 
    transition-delay: 1s; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
} 
#on-hover:hover { 
    opacity:1; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
} 

http://jsfiddle.net/djwave28/CuNkZ/6/

比IE10瀏覽器的舊的瀏覽器不支持，但你可以將-MS-濾波器具有不透明性響應。