保持div：永遠在前面

關於保持div的內容總是可見的一個問題。保持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; 
}

我的問題是，懸停，信息框無法正確顯示。我試圖添加一個z-index來確保信息框始終顯示在其他td之前，但它不起作用。我又看了看這些問題，但他們並沒有完全給我我需要什麼：

Here和Here

第二個問題，我有是，當鼠標懸停在TD時，我想保持彈出信息框當鼠標移入信息框本身時。目前，當鼠標移動到不同的td時，鼠標在彈出的信息框中移動時，當前信息框會再次設置爲顯示：無，並顯示新td的信息框。

我希望你們中有人知道如何做到這一點。

來源

2013-06-23 Shiuyin

我可以問你爲什麼不使用像qTip插件？顯然它可以在沒有它的情況下完成，但是你正在重新發明輪子。 – Dutchie432

嘗試將'z-index'從1改爲9999 –

Z-index僅適用於定位元素（位置不同於靜態的元素）。你似乎壽添加position: relative到.Field類，所以你只需要的z-index爲懸停狀態：

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

來源

2013-06-23 13:29:27 Kaloyan

哇非常感謝。甚至沒有注意到z-index僅適用於定位元素。再學習一些東西！ – Shiuyin

這實際上是一個棘手的屬性。你可能想看看這個 - http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ – Kaloyan

要小心z-index和Internet Explorer你http： //www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ –

試試這個 - 我剛添加的Z-index屬性。

JSFIDDLE

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

來源

2013-06-23 13:29:30

保持div：永遠在前面

回答

相關問題