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浏览器不工作

回答

相关问题