1

关于保持悬停 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-index 以确保信息框始终显示在其他 td 之前，但它不起作用。我还查看了这些问题，但它们并没有完全满足我的需求：

这里和这里

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

我希望你们中的某个人知道如何做到这一点。

4

2 回答 2

3

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

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

于 2013-06-23T13:29:27.240 回答
0

试试这个 - 我刚刚添加了 z-index 属性。

JSFIDDLE

.Field:hover {
    background-color:red;
    z-index: 3000;
}
于 2013-06-23T13:29:30.267 回答