使用CSS在悬停时叠加透明图像

Question

我正在尝试使用CSS在悬停时叠加透明图像.

这里有一个答案,但它在IE7或IE8中不起作用.谁会知道怎么做？

我试图保持超轻,所以不要真的想使用js或类似的东西.

谢谢

Answer 1

我检查了你的链接,并基于此提出了这个解决方案.

HTML:

<div class="image">
    <img src="xy.jpg" alt="" />
    <img class="hoverimage" src="xy_hover.jpg" alt="" />
</div>

CSS:

.image { position: relative; width: 184px; height: 219px; }
.hoverimage { position: absolute; top: 0; left: 0; display: none; }
.image:hover .hoverimage { display: block; }

应该适用于所有浏览器,包括IE8和IE7.它在IE6中不起作用,因为它只允许:将鼠标悬停在某些元素上,例如links(<a>).如果你想支持IE6,变化.image是一种<a>代替<div>,并给它display: block;.