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

如何设置悬停过渡

1 个答案: