0

これは、次のようなグリッド構造のコンテンツです。

<div id="gridBlock">
  <div class="list-lot-item">
    <div class="list-lot-item-info">
        <a href="#" class="list-lot-item-col1"></a>
        <div class="list-lot-item-col2"></div>                       
        <div class="list-lot-item-col3"></div>
    </div>
  </div>
  <div class="list-lot-item">....</div>
</div>

そのようないくつかのCSSを使用します（ただし、JSFiddleではより多くの）：

#gridBlock .list-lot-item{
 float:left;
 position:relative;
 height:25px;
 width:50px;
 border:1px solid #fff;
 padding-left:2px;
}
#gridBlock .list-lot-item-info,
#gridBlock .list-lot-item-info-on{
 display:block;
 position:absolute;
 background-color:#fff;
 border:1px solid #fff;
 width:50px;
}
#gridBlock .list-lot-item-info{
 z-index:199;
}
#gridBlock .list-lot-item-info-on{
 border:1px solid red;
 top:0;
 z-index:200;                            
 position:relative;
 background-color:yellow;
}
#gridBlock .list-lot-item-col2,
#gridBlock .list-lot-item-col3{visibility:hidden;}
#gridBlock .list-lot-item-info-on .list-lot-item-col2,
#gridBlock .list-lot-item-info-on .list-lot-item-col3{visibility:visible;}

ボックスの「ホバー」状態ごとに、より高い z-index を持つ新しい「オン」クラスを適用します。

$('#gridBlock .list-lot-item').hover(
  function(){$(this).children(0).removeClass("list-lot-item-info");$(this).children(0).addClass("list-lot-item-info-on");},
  function(){$(this).children(0).removeClass("list-lot-item-info-on");$(this).children(0).addClass("list-lot-item-info");}
);

明らかに、FF、Chrome、IE8+ では完璧に動作しますが、古くからの友人である IE7 は弱いです。互換モードで試してみてください:

実際のライブデモ

IE7 は、ホバーされたボックスを隣接するグリッド ボックスの下にポップします。それを修正する良い提案はありますか？

ここに画像の説明を入力

4

2 に答える 2

2

Ubuntuで作業しているため、これをテストするためのIEのバージョンにアクセスできません。

しかし、私の理解では、それz-indexはposition:absolute;

position:relative;から削除してみてください。これにより#gridBlock .list-lot-item-info-on デザインが壊れてしまった場合は、余白を付けてリセットすることもできます。

于 2012-12-11T19:01:03.000 に答える
1

これを追加：

#gridBlock .list-lot-item:hover {
   z-index:200;   
}

IE7 は z インデックスに非常に厳密であるためです。それらはすべて同じ z-index 値 (何もない) を持っているので.list-lot-item、最後に来るものは前のものの上にあります。そして、彼らは両親の秩序から抜け出すことはできません。

z-index がそれぞれ 1 と 2 の要素 A と B を取り、B の下に表示される z-index の高さに関係なく、A の任意の子です。IE7/8 はこれについて非常に厳密です。

JSFiddle

于 2012-12-11T19:08:41.003 に答える