如何在悬停时设置过渡

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; 
}

演示

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-filter来响应不透明度