私はこれに数日間頭をぶつけていましたが、あきらめました。
.hover ターゲットを含む div と、そのターゲットがホバーされたときに表示する div があります。その子 div はスパンと段落で構成され、スパンは部分的に div の外側に絶対配置されます。
最新のブラウザーでは、すべてがうまくフェードインしますが、IE 8 未満では、スパン (赤い背景) が正しくフェードインせず、親 div 内の部分のみが表示され、アニメーションが完了すると残りが外側に表示されます。
さまざまな jQuery セレクターを使用してみたり、カスタム フェード関数を記述してフィルターを削除したり、ブラウザーが DirectX を使用しないようにするために親要素を画面外に絶対に配置したりしました。
問題を示す JSBin (IE8 以下のみ): http://jsbin.com/emegas/3/edit
HTML:
<div class="tooltip">
<span class="pointer">hover here</span>
<div class="tip">
<span class="tipPointer"></span>
<p>asdasdas.</p>
</div>
</div>
jQuery:
$('.pointer').hover(function(){
$(this).next('.tooltip .tip').stop(true, true).fadeIn(1000);
}, function(){
$(this).next('.tooltip .tip').stop(true, true).hide();
});
可能であれば、スパンを親と同時にフェードインさせるにはどうすればよいですか?