CSS懸停 - >更改Z-形象：在IE瀏覽器不工作

在一些瀏覽器而不是在IE以下工作：CSS懸停 - >更改Z-形象：在IE瀏覽器不工作

預期的結果：在默認情況下，藍格涵蓋的圖片...但是鼠標懸停在圖像的任何可見部分都會帶來整個圖像（在藍色格子前面）。

CSS：

.container { position:relative; } 

.bigpic    { position:relative;width:300px;height:300px; } 
.bigpic img   { z-index:2; position:relative; } 
.bigpic img:hover { z-index:10; } 

.shade { z-index:3; 
     position:absolute; top:20%;left:0; 
     width:100%; height:200px; 
     background-color:blue; }

HTML：

<table> 
    <tr> 
     <td class="container" > 
     <div class="bigpic"> 
      <img src="http://s8.postimg.org/xhqgtehlh/sample.jpg" /> 
     </div> 
     <div class="shade"></div> 
     </td> 
    </tr> 
</table>

任何想法？建議？試圖遠離Javascript這一點。

謝謝！

來源

2013-11-26 Basic

作品在IE10 .. –

IE的哪個版本測試？你是否也能看到這個貼子的提琴問題？ – PSL

對我的作品在IE9 – frozenkoi

這是基於由@showdev鏈接信息。如果父級z-index在懸停而不是圖像上發生更改，則它可以工作。

.bigpic:hover { z-index:10;}而不是.bigpic img:hover { z-index:10;}

jsfiddle.net/sMg7a/1/

你的確需要再努力一點閱讀您的意見給出的鏈接。

P.S.在IE 10.0（.9200.16721）

來源

2013-11-26 19:00:41 Xylo

謝謝你的解決方案@Xylo。我根據評論中的鏈接嘗試了各種各樣的變化。將z-index值添加到沒有它的元素，確保放置位置等，但是，我從來沒有想過嘗試將操作移動到父級而不是圖像。有時候，我認爲這只是一個不同的觀點。再次感謝。 – Basic

CSS懸停 - >更改Z-形象：在IE瀏覽器不工作

回答

相關問題