圖像消失而不是在ie7中顯示

我使用CSS懸停和不透明度將一個圖像更改爲另一圖像時，將其懸停在上面，將一個放置在頂部並設置不透明度，以便在懸停和底部圖像上消失離開了。代碼如下：圖像消失而不是在ie7中顯示

#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中工作正常，第二圖像是不存在的，當第一圖像不可見。有人知道怎麼修這個東西嗎？

來源

2011-04-06 holly

我的回答不好，所以我刪除了它。我一直試圖在jsfiddle中使用CSS - 請參閱http://jsfiddle.net/8HLdx/ - 但我想我還需要查看您的HTML代碼。隨意玩JSFiddle中的例子;它是測試JS和CSS代碼的好地方。我在IE7或IE8中沒有看到任何不透明的測試，但正如我所說，我不得不猜測你的HTML結構。 – Spudley 2011-04-06 11:46:54

不透明度僅用於使第一個圖像消失以顯示其背後的圖像。該html是：

– holly 2011-04-06 12:17:28

我有made a demo這似乎在Chrome，Firefox和IE7中爲我工作。

它工作在IE8 +爲-ms-filter規則是正確的，但是不透明度在IE7是filter:alpha(opacity=xx)規則和值應該是between 0 and 100。你目前的價值.5正在讓懸停的圖像幾乎完全不透明（我不知道它甚至是有效的）。

quirksmode對IE的不透明CSS規則有一個很好的總結。

注意：在您的示例結構中，您在示例中添加的<li>之前缺少<ul>或<ol>。

來源

2011-05-31 13:19:12 andyb

圖像消失而不是在ie7中顯示

回答

相關問題