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 のフィドルをチェックしてください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 に答える