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

我刚刚想到这一点，感谢Stack Overflow的“类似问题”功能，但无论如何我都会发布它以防任何其他菜鸟有同样的问题。

使用显示不存在的可见性！（这是工作 fiddle。）

相关专栏：

.debug-menu .label {
    position: relative; padding-right: 20px;
    display: none;
}
.debug-menu:hover .label {
    display: block;
}

Answer 2

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

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

.debug-menu hr {
    visibility: hidden;
}

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

（h3溢出其父级并导致：悬停以激活）

css popup中奇怪的悬停区域

2 个答案: