我仅使用 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 索引似乎不起作用。
该图像显示在用户名“下方”(带有 by_user 类),但在普通文本上方。
如何使覆盖/工具提示显示在顶部?
您的 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
我想。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)