HTML / CSS弹出窗口显示不响应
我试图制作一个Chrome扩展，当鼠标悬停在p ， h1等上面时，会显示一个包含该元素font-family的弹出窗口。 它大部分都能正常工作，但有时无法正确显示，如下图所示。
我怎样才能设置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;
}
这应该工作...
.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;
}