HTML/CSS彈出窗口顯示不響應

我試圖製作一個Chrome擴展，當它懸停在p，h1等上面時，將顯示一個包含該元素的彈出窗口font-family。它大部分都能正常工作，但有時無法正確顯示，如下圖所示。HTML/CSS彈出窗口顯示不響應

我該如何設置CSS樣式，使其絕對定位並始終展開以適應文本並完全可見？該擴展通過使用appendChild來將包含隱藏彈出窗口的跨度添加到當前元素。

請注意，在第二張圖片中，彈出窗口，因爲其父的制約切斷。

CSS：

.crx_mouse_visited:hover .popup { 
    visibility: visible; 
} 

.popup { 
    display: block; 
    position: absolute; 
    width : 100%; 
    height: auto; 
    z-index: 100; 
    visibility: hidden; 
    font-size: 15px; 
    background-color: #333; 
    color: #fff; 
    border-radius: 4px; 
    padding: 5px 0; 
}

來源

2016-09-16 Marc Fletcher

郵報[MCVE]，而不是兩個CSS規則 – j08691

@ j08691這是CSS的全部在那裏。這些圖像顯示.popup類。你還想要我提供什麼？ –

您是否在* DOM的末尾添加* * < * *或者就在那個*'hovered' *元素中？ – vivekkupadhyay

這應該工作...

.crx_mouse_visited:hover .popup { 
    visibility: visible; 
} 

.popup { 
    display: block; 
    position: absolute; 
    z-index: 100; 
    visibility: hidden; 
    font-size: 15px; 
    background-color: #333; 
    color: #fff; 
    border-radius: 4px; 
    padding: 5px; 
}

來源

2016-09-16 04:13:15

HTML/CSS彈出窗口顯示不響應

回答

相關問題