1

JSFiddle リンク: http://jsfiddle.net/2JUEJ

IE8 でページを開くと、マウスがコンテナー DIV (class=tableRow) に入ると、hoverその最初の子 DIV (class=tile/wideTile/longTile) のイベントが発生します。Fxでうまく動作します。event.preventDefault();親のイベントで使ってみましたhoverが、直りません。手がかりはありますか？

4

3 に答える 3

2

クラスfloat:leftとdisplay:table-cellの組み合わせは互換性がありません。設定すると、自動的に表示がブロックに設定されます。ChromeまたはFirebug/Firefoxで計算されたスタイルを見てください。.tilefloat

テーブルセルをフローティングすると、ブラウザが匿名のテーブルオブジェクトを生成し、IE8でレンダリングエラーが発生する場合もあります。Chrome/Firefoxは非互換性を別の方法で解釈していると思います。

削除するdisplay:table-rowと、IEはセルをわずかに良くレンダリングし、他の行の子にカーソルを合わせたときに最初のセルのホバーイベントがトリガーされなくなります。ただし、これは意図したレイアウトを壊すため、新しいアプローチを使用することをお勧めします。

最初にすべてのdisplay:table-*ルールを削除します。これは、すべてがフロートされているため（すでに述べたようにdisplay:block）、すべてがフロートされているため、それぞれtableに幅が必要です。そうでない場合、すべての要素が互いに水平になります。たとえば420px、.tableクラスで試してみました。

デモを参照してください。

注：個人的には、フロートを完全に削除し、display:inline-block;vertical-align:topいくつかのポジショニングを組み合わせて使用​​することをお勧めします。フローティングは通常、クリアするために追加のルールやマークアップが必要になるためです（CSSフロートは好きではありませんでした！）

この回答の一部を説明するのに役立つ可能性のあるその他の質問：

于 2012-12-27T13:49:44.413 に答える
0

イベントは子から親に伝播されます。子divハドラーでevent.stopPropagation（）を試してください。

于 2012-12-27T11:43:31.947 に答える
0

この方法を試してください：

$(document).ready(function() {
    $(".title").hide();
    $(".tile, .wideTile, .longTile").hover(function() {
       $("div[class=title]", this).stop().slideDown("fast");
    }, function() {
       $("div[class=title]", this).stop().slideUp("fast");
    });
});

このスクリプトを使用してみて、これが役立つかどうかを確認してください。

于 2012-12-27T11:38:57.867 に答える