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动态设置为更高的onmouseover，则无关紧要。这就像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 = 'show-details';将该类应用于该元素

Answer 2

使用来自@Kevin答案的相同HTML / CSS，但也改变相对div .details的z-index。这将在IE上更好地工作。

Answer 3

事实证明，设置z-index和不透明度是搞乱的事情。看看这个：

<html>
<head>
<style>
td {
    background-color: #aaf;
    padding: 1em;
}

.relative {
    position: relative;
    width: 100%;
}

div.highlight {
    position: absolute;
    background-color: green;
    bottom: -1em;
    left: 0;
    width: 100%;
    height: 0.2em;
    /* the offenders */
    z-index: 10;
    opacity: 0.8;
}

div.tag {
    background-color: red;
    position: absolute;
    top: -5em;
    left: 0;
    width: 1em;
    height: 1.5em;
    overflow: hidden;
    z-index: 20;
    font-size: 0.6em;
    text-align: left;
    border: solid 0.1em #000;
    padding-left: 0.3em;
}

div.tag:hover {
    width: 30em;
    z-index: 100;
}
</style>
</head>
<body>
<table>
<tr>
  <td>
    limited info
    <div class="relative">
    <div class="highlight">
      <div class="tag">
        informative long text is here
      </div>
    </div>
    </div>
  </td>
  <td>
    some short info
    <div class="relative">
    <div class="highlight">
      <div class="tag">
        aaaaaaaaaalolkjlkjnger explanation about what is really going on that covers the div up there ^^^. darn!
      </div>
    </div>
    </div>
  </td>
</tr>
</table>
</body>
</html>

在td里面的div弹出窗口

3 个答案: