css中的奇怪悬停区域弹出

我为我正在处理的一个页面创建了一个小的弹出式菜单，只用css。基本上，我有这个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），事情是，如果你从BELOW接近，那么：鼠标悬停发生的方式太快，即当鼠标低于div边缘时。另外，随着鼠标移动，它会闪烁。

来源

2013-05-03 samson

我只是想出了这一点，这要归功于Stack Overflow的出色的“类似问题”功能，但无论如何，如果其他noob有同样的问题，我会发布它。

用法显示不可见!!! （这里的工作fiddle。）

相关线路：

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

来源

2013-05-03 00:57:51 samson

替换以下CSS说明是这样的：

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

.debug-menu hr { 
    visibility: hidden; 
} 

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

（其母公司和事业之外H3溢出：悬停是激活）

来源

2013-05-03 01:09:31 nicolas

css中的奇怪悬停区域弹出

回答

相关问题