懸停下降與溢出

所以我有這個下拉菜單，當你懸停在一個鏈接下拉菜單彈出溢出爲自動。我的問題是，只要將鼠標放在底部鏈接上或嘗試滾動它，懸停就會停止，並且塊會消失，因爲它已達到其高度限制。它在Chrome和Firefox中這樣做，但在IE8中工作得很好。關於我能做些什麼來解決這個問題的建議？這裏是我的代碼：懸停下降與溢出

CSS

*{margin:0px; padding:0px} 
#container{background-color:pink;padding:30px;width:300px;} 
#dropMenu{display: none; 
    height: 75px; 
    overflow: auto; 
    width: 200px;}

HTML

<div class="container"> 
    <a href="#" onMouseOver="menuOpen()">Hover This</a> 
    <div id="dropMenu"> 
     <a href="#">Menu Item1</a><br /> 
     <a href="#">Menu Item2</a><br /> 
     <a href="#">Menu Item3</a><br /> 
     <a href="#">Menu Item4</a><br /> 
     <a href="#">Menu Item5</a><br /> 
     <a href="#">Menu Item6</a><br /> 
    </div> 
</div>

腳本

<script type="text/javascript"> 
    function menuOpen(){ 
     document.getElementById('dropMenu').style.display = 'block'; 
    } 

    document.getElementById('dropMenu').onmouseout = function (e) { 
     e = e || window.event; 
     var target = e.srcElement||e.target; 
     if (target.id == "dropMenu") { 
      document.getElementById('dropMenu').style.display = 'none'; 
     } 
    }; 
</script>

之前，我的問題，假設我的CSS是我的頭在正確的風格標籤， divs在body中，腳本在body標籤之前。

來源

2012-01-30 Howdy_McGee

我真的不想爲單個懸停效果導入整個庫。像這樣的小事情，我發現JS更容易IMO – 2012-01-30 20:01:50

公平的，如果它只是這一個事件。 – VictorKilo 2012-01-30 21:01:11

如果你不介意的菜單下拉，當你將鼠標懸停在粉紅色的容器，而不是僅僅的鏈接，你可以使用這個CSS-唯一的解決辦法：

*{margin:0px; padding:0px} 

#container{background-color:pink;padding:30px;width:300px;} 

#dropMenu{display: none; 
    height: 75px; 
    overflow: auto; 
    width: 200px;} 

#container:hover #dropMenu { 
    display:block; 
}

沒有所需的JavaScript。它更乾淨，效果更好。看看我的例子jsFiddle。

來源

2012-01-30 19:29:31 MMM

謝謝，我可能應該在我的問題中指定。真的，這是一個側欄，每個容器都是一個類。：S抱歉 – 2012-01-30 19:33:42

但是，阻止你爲每個容器制定'：hover'規則？ – MMM 2012-01-30 19:35:40

如果我放置一個'.container：hover'並且有3個容器類，那麼無論它們在哪個容器上懸停，菜單都會彈出正確的？我不能讓它成爲第一個孩子，因爲其他的東西需要放在首位。 'nth'子不支持在每個瀏覽器中，但不是支持：（ – 2012-01-30 19:45:29

懸停下降與溢出

回答

相關問題