如何在悬停上设置转换

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-滤波器具有不透明性响应。