0

我为正在处理的页面创建了一个小弹出菜单，仅使用 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;
}

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

4

2 回答 2

0

I just figured this out, thanks to Stack Overflow's awesome "Similar Questions" feature, but I'm gonna post it anyway in case any other noob has the same problem.

USE DISPLAY INSTEAD OF VISIBILITY!!! (Here's the working fiddle.)

The relevant line:

.debug-menu .label {
    position: relative; padding-right: 20px;
    display: none;
}
.debug-menu:hover .label {
    display: block;
}
于 2013-05-03T00:57:51.440 回答
0

以这种方式替换以下 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 被激活）

于 2013-05-03T01:09:31.193 回答