的onmouseover是行不通的鼠標懸停我想顯示ID = H1，E1項目

Question

<style> 
.h,.e {list-style-type: none; float:left;} 
.h div,.e div{background-color:gray; padding:2px 20px;margin:1px;} 
#h1,#e1{background-color:yellow; padding:2px 20px;margin:5px; visibility:hidden; 
} 

<ul> 
    <li class="h"> 
    <div id="h">Home</div> 
    <ul class="h1" id="h1"><li>H1</li><li>H2</li><li>H3</li><li>H4</li></ul> 
    </li> 
    <li class="e"> 
    <div id="e">Exit</div> 
    <ul class="e1" id="e1"><li>E1</li><li>E2</li><li>E3</li><li>E4</li></ul> 
    </li> 
<ul> 

<script> 
    var oh = document.getElementById("h"); 
    var oe = document.getElementById("e"); 
    var oh1 = document.getElementById("h1"); 
    var oe1 = document.getElementById("e1"); 

    oh.onmouseover=function(){oh1.style.visibility="";}; 
    oe.onmouseover=function(){oe1.style.visibility="";}; 
</script> 

，但它無法正常工作......，什麼是與代碼的問題呢？

Answer 1

<script> 
    var oh = document.getElementById("h"); 
    var oe = document.getElementById("e"); 
    var oh1 = document.getElementById("h1"); 
    var oe1 = document.getElementById("e1"); 

    oh.onmouseover=function(){oh1.style.display="block";}; 
    oe.onmouseover=function(){oe1.style.display="block";}; 
</script> 

Answer 2

嘗試：

oh1.style.visibility="visible"; 

應該是一個非常明顯的修復，但作爲解釋 - 設置可見性「」是沒有價值 - 因此不會有任何改變，「看得見」是一個公認的價值和意志顯示oh1對象。

Answer 3

嘗試visible。

oh1.style.visibility="visible"; 

Answer 4

使用jQuery：http://jsfiddle.net/JqvSL/8/

它使您的生活更輕鬆，並且代碼看起來10X清潔。您可以使用opacity或display隱藏該塊，但visibility也可以與jQuery一起使用。使用樣式