保持div：悬停在前面

Question

关于保持悬停 div 的内容始终可见的一个问题。

我确实有一个由 td 组成的大网格。当将鼠标悬停在每个 td 上时，我想显示一个包含有关该 td 的附加数据的信息框。当前代码：

JS-小提琴

#Grid {
}
.Field {
    border:thin solid black;
    width:30px;
    height:30px;
    float:left;
    background-color:blue;
    position:relative;
    z-index:0;
}
.FieldOverview {
    display:none;
}
.Field:hover {
    background-color:red;
}
.Field:hover .FieldOverview {
    display:block;
    position:absolute;
    top:10px;
    left:10px;
    width:100px;
    height:100px;
    border:thin solid black;
    background-color:red;
    z-index:1;
}

我的问题是，悬停信息框未正确显示。我尝试添加 z 索引以确保信息框始终显示在其他 td 之前，但它不起作用。我也查看了这些问题，但它们并没有完全满足我的需要：

这里和这里

我遇到的第二个问题是，当鼠标悬停在 td 上时，我想在鼠标移入信息框本身时保留弹出的信息框。目前，当在弹出的信息框中移动鼠标时，一旦鼠标移到不同的 td 上，当前信息框将再次设置为 display:none 并显示新 td 的信息框。

我希望你们中有人知道如何实现这一目标。

Answer 1

Z-index 仅适用于定位元素（位置与静态不同的元素）。您似乎已经添加position: relative到.Field类中，因此您只需要悬停状态的 z-index ：

http://jsfiddle.net/KrU6m/4/