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中的奇怪懸停區域彈出

回答

相關問題