2

CSS のみを使用してサムネイル画像をホバーします。

<style type='text/css'>
#like_table td a{z-index:2;}
#like_table .tooltip
{
    position: relative;
    z-index:1;
}
#like_table .tooltip a
{
  z-index:2;
}
#like_table .tooltip span
{
  z-index:9999;
  display:none;
}
#like_table .tooltip:hover span
{
          position:absolute;
          display:block;
          top:1.5em;
          left:2em;
          border:1px solid black;
          background-color:white;
          padding:0.2em;
}
#like_table td .tooltip .tooltip_thumb{
            z-index:99999;
}
</style>

<table id='like_table' class='smallfont' border='0' cellpadding='0' cellspacing='0'><tr><td>
                    <div class='like_row'>
                        <a href='#user1' class='nul'>User 1</a> liked <a href='#link' class='tooltip'>forum post<span><img src='image.jpg' class='tooltip_thumb' alt='' /></span></a>
                        <span class='by_user'>by <a href='#user2' class='nul'>User 2</a></span>
                    </div>
                    </td>
</tr>

残念ながら、スパンとホバー画像の z-index は機能していないようです。画像はユーザー名 (by_user クラス) の「下」に表示されますが、通常のテキストの上に表示されます。

オーバーレイ/ツールチップを一番上に表示するにはどうすればよいですか?

4

2 に答える 2

4

これらのアイテムはすべて同じレベルにないため、z-index は機能しません。それらはすべて互いに入れ子になっています。Z-index は、次のように DOM の同じレベルの要素でのみ機能します。

<div class="level1">
   <span class="level2"> 1 </span>
   <span class="level2"> 2 </span>
   <span class="level2"> 3 </span>
</div>

スパンに z-index を設定すると機能しますが、「上位」要素であるため、設定しても効果はありません。

編集：そしてあなたのcssに書い.tooltip aたが、あなたは何も持っていないので<a>、.tooltipあなたはa.tooltip私が推測する.

于 2013-01-17T19:52:21.767 に答える
3

現在のすべてを削除し、そのままにしてz-indexおきますz-index: 9999.tooltip

于 2013-01-17T19:39:35.007 に答える