css-transitions - 如何在悬停时设置过渡

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 以使不透明度响应。