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

【问题标题】：image disappear instead of showing in ie7图像消失而不是在 ie7 中显示
【发布时间】：2011-07-30 17:45:38
【问题描述】：

我正在使用 CSS hover 和 opacity 使您将鼠标悬停在一张图像上时会变成另一张图像，方法是将一个图像放在顶部并设置不透明度，以便它在悬停时消失并留下底部图像。代码如下：

#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 中，当第一个图像不可见时，第二个图像不存在。有谁知道如何解决这个问题？

【问题讨论】：

我的回答不好，所以我把它删了。我一直在尝试在 jsfiddle 中使用您的 CSS——请参阅jsfiddle.net/8HLdx——但我想我还需要查看您的 HTML 代码。随意使用 JSFiddle 中的示例；这是一个测试 JS 和 CSS 代码的好地方。我在 IE7 或 IE8 的测试中没有看到任何不透明性，但正如我所说，我不得不猜测您的 HTML 结构。
不透明度仅用于使第一张图像消失以显示其后面的图像。 html是：