我有一张包含一堆单元格的表格。 (不可能!太棒了!:P)一些单元格有一个小的 div,当你把鼠标放在上面时,它会变大,这样你就可以阅读所有的文本。这一切都很好。但是,由于文档中后面出现的 html 元素具有更高的 z-index,因此当 div 变大时,它位于其他单元格中其他 div 的下方。
一些html代码:
<table>
<tr>
<td>
limited info
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; width: 1em; height: 1em;" onmouseover="tooltipshow(this)" onmouseout="tooltiphide(this)">
informative long text is here
</div>
</div>
</td>
<td>
some short info
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; width: 1em; height: 1em;" onmouseover="tooltipshow(this)" onmouseout="tooltiphide(this)">
longer explanation about what is really going on that covers the div up there ^^^. darn!
</div>
</div>
</td>
</tr>
</table>
一些js代码:
function tooltipshow(obj)
{
obj.style.width = '30em';
obj.style.zIndex = '100';
}
function tooltiphide(obj)
{
obj.style.width = '1em';
obj.style.zIndex = '20';
}
如果我在鼠标悬停时将 z-index 动态设置为更高的值并不重要。就像 z-index 没有影响。我认为这与表格有关。
我已经在 FireFox3 中对此进行了测试。当我觉得特别有男子气概的时候,我会在 IE 中测试它。
最佳答案
您是否尝试过基于 CSS 的解决方案?
HTML:
<table>
<tr>
<td>
limited info
<div class="details">
<div>
informative long text is here
</div>
</div>
</td>
<td>
some short info
<div class="details">
<div>
longer explanation about what is really going on that covers the div up there ^^^. darn!
</div>
</div>
</td>
</tr>
</table>
CSS:
.details {
position: relative;
}
.details div {
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
}
.details div:hover {
width: 30em;
z-index: 100;
}
如果需要 Javascript,您可以将 .details div:hover {
行更改为 .show-details {
并使用 将类应用于元素element.className = '显示详细信息';
关于html - td 内的 div 弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2816780/