css - css弹出窗口中奇怪的悬停区域

Question

我已经为我正在处理的页面创建了一个小的弹出菜单，只使用了 CSS。基本上，我有这个

.debug-menu {
    position: absolute; z-index:101;
    width: 50px; height: 20px; padding: 15px; top: 30px; right: 30px;
    background: #f00505; color: white;
}
.debug-menu:hover {
    width: 150px; height: 180px;
}

以及类似这样的内容:

.debug-menu .label {
    position: relative; padding-right: 20px;
    visibility: hidden;
}
.debug-menu:hover .label {
    visibility: visible;
}

这是一个 fiddle .它或多或少地按预期工作，在悬停时展开并显示其内容。如果您从左侧使用鼠标接近，则悬停事件会正确发生，就在您进入 div 时。奇怪的是(也许我只是没有正确使用 css)，如果你从下面接近，:hover 发生得太快了，即当鼠标低于 div 的边缘时。此外，它会随着鼠标四处移动而闪烁。

Answer 1

以这种方式替换以下 CSS 指令:

.debug-menu h3 {
    text-align: center;
    text-decoration: underline;
    display:none;
}

.debug-menu hr {
    visibility: hidden;
}

.debug-menu:hover h3 {
   display:block;
}

(h3 溢出其父级并导致 :hover 被激活)