html - td 内的 div 弹出窗口

Question

我有一张包含一堆单元格的表格。 (不可能!太棒了!: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 中测试它。

Answer 1

您是否尝试过基于 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 = '显示详细信息';