Question

我有3张图片。当悬停一个图像时，它会悬停在悬停的图像之上。

这是我的代码： HTML

<a class="toggle"><img src="" style="position:absolute"><img src=""></a>
<a class="toggle" style="margin-left:30px;margin-right:30px"><img src="" style="position:absolute"><img src=""></a>
<a class="toggle"><img src="" style="position:absolute"><img src=""></a>

CSS

a.toggle img:hover {
    opacity:0.1;
    filter:alpha(opacity=10); /* For IE8 and earlier */
}

Firefox和Chrome一切正常。问题出在Internet Explorer（也是IE 10）上。中间的图像很奇怪！

查看IE的小提琴以查看问题 http://jsfiddle.net/6nebL/

如何以干净的方式修复此问题，而不会增加代码的复杂性？

Answer 1

将a设为inline-block：

a {
    display: inline-block;
}

小提琴更新： http://jsfiddle.net/6nebL/3/

Answer 2

在这里，我已经更新了你的CSS和HTML，以便更友好。 CSS：

.toggle img:hover {
    opacity:0.1;
    filter:alpha(opacity=10); /* For IE8 and earlier */
}

.toggle {
    display:inline-block;
    vertical-align:middle;
    width:150px;
    position:relative;
    margin:0 30px;
}

img {
    position:absolute;
    top:0;
    left:0;
}

HTML没有内联样式。

Here is the updated jsFiddle.

位置：绝对“背景”图像Internet Explorer问题

2 个答案: