0

我有 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 查看 fiddle 以查看问题http://jsfiddle.net/6nebL/

我怎样才能以一种干净的方式解决这个问题而不增加代码的复杂性？

4

2 回答 2

1

在这里，我更新了您的 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 只是没有内联样式。

这是更新的 jsFiddle。

于 2013-10-14T18:12:06.290 回答
1

设置a为inline-block：

a {
    display: inline-block;
}

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

于 2013-10-14T18:09:49.217 回答