模態彈出式問題中的CSS懸停效果

我已經創建了一個帶有模式彈出式控件的網頁。在這個控件中，我動態地構建一個html來顯示數據。在一些表標籤，我有以下：模態彈出式問題中的CSS懸停效果

<td> 
<a href="#"><span>S</span><span class="pop">description</span></a> 
</td>

我想創建一個彈出效果懸停在標籤時。我的CSS是：

a .pop { 
    display:inline; 
    position:absolute; 
    visibility: hidden; 
    background-color: #FFFFFF; 
    border: solid 2px #000000; 
    padding: 5px; 
    margin: 0 0 0 10px; 
    color: #000000; 
    text-align: left; 
    font-weight: normal; 
} 

a:hover .pop { 
    visibility: visible; 
}

這工作完全當我使用一個標準的HTML頁面內的控制。它似乎在模態彈出控件中工作，直到我需要向下滾動模式控件時，表格數據大於模態窗口。

懸停效果似乎不起作用。我認爲這是因爲即時使用「位置」：「絕對」爲「.pop」類，並且懸停效果正在工作，但由於我已滾動瀏覽頁面，它的位置不再與標籤相關。

我無法擺脫這一點，它殺死我。我是否需要使用「鼠標懸停」事件動態地重新定位控件，或者可以通過CSS來實現，而我只是缺少某些東西/作爲新手。

卡爾

來源

2013-05-02 Karl

嘗試添加此：

a { display:block; position:relative }

這將使span.pop被relativily定位到一個標籤是在

例如： http://jsfiddle.net/R4Erw/

來源

2013-05-02 12:35:52

那效果很好。非常感謝。最後一個問題是：當我將鼠標懸停在字段上時，顯示的彈出窗口的寬度非常小，幾乎在每個單詞之後都會打包。它是否繼承了表單元格的寬度？我知道我可以設置彈出窗口的寬度/最小寬度，但是我可以做些什麼，以便它智能地知道需要多大的寬度，因爲在某些情況下，我只需要足夠的空間用於1個字符，而其他我需要大量的空間來描述。 – Karl 2013-05-02 14:10:24

模態彈出式問題中的CSS懸停效果

回答

相關問題