Question

当你将鼠标悬停在其上时，我正在使用CSS悬停和不透明度将一个图像更改为另一个图像，将一个图像置于顶部并设置不透明度，使其在悬停时消失，并保留底部图像。代码如下：

#fade {
    overflow:hidden;
    margin:0 auto;


}
#fade img {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    }



#fade img.topfade:hover {
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=5)";
    filter:alpha(opacity=.5);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;

}

这在ie8，ie9和firefox中工作正常，但在ie7中，当第一个图像不可见时，第二个图像不存在。任何人都知道如何解决这个问题？

Answer 1

我有made a demo这似乎适用于Chrome，Firefox和IE7。

它适用于IE8 +，因为-ms-filter规则是正确的，但IE7中的不透明度是filter:alpha(opacity=xx)规则，值应为between 0 and 100。您当前的值.5使得悬停的图像几乎完全不透明（我不确定它是否有效）。

quirksmode对IE的不同不透明度CSS规则有一个很好的总结。

注意：在您的示例结构中，您在我在演示中添加的<ul>之前缺少<ol>或<li>。

图像消失而不是在ie7中显示

1 个答案: