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>in .tooltip，所以你a.tooltip认为我想。

于 2013-01-17T19:52:21.767 回答
3

删除所有当前z-index并保持z-index: 9999打开状态.tooltip

于 2013-01-17T19:39:35.007 回答