Question

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

我确实有一个由td制成的大型网格。当鼠标悬停在每个td上时，我想显示一个信息框，其中包含有关该td的其他数据。现行守则：

#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;
}

我的问题是，hover-info-box未正确显示。我试图添加一个z-index以确保信息框始终显示在其他td之前，但它不起作用。我也查看了这些问题，但他们并没有完全给我我需要的东西：

Here和Here

我遇到的第二个问题是，当鼠标悬停在td上时，我希望在鼠标移动到信息框本身时保持弹出信息框。目前，当鼠标经过不同的td时，在弹出的信息框中移动鼠标时，当前的信息框再次设置为显示：none并显示新td的信息框。

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

Answer 1

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

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

Answer 2

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

JSFIDDLE

.Field:hover {
    background-color:red;
    z-index: 3000;
}

保持一个div：总是在前面悬停

2 个答案: