Question

以下适用于某些浏览器但不适用于IE：

预期结果：默认情况下，蓝色div覆盖图像...但是鼠标悬停在图像的任何可见部分上会使整个图像向前（在蓝色div前面）。

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。

谢谢！

Answer 1

这是基于@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）

中测试

css hover - ＆gt;更改z-image：在IE中不起作用

1 个答案: