2014-02-08 18 views
0

我看了一下this頁面試圖做一個簡單的鼠標在菜單上工作(基於用戶:sarfraz的答案)。我不確定我是否錯過了JavaScript,但看起來應該沒有。如果我加載頁面,我會得到一個div,將「菜單」寫入一個框中,然後將鼠標移到該框上,只保留一次。在將鼠標取下後,div框消失不再被看到。我試圖搞visibility風格在menu編號,將其設置爲可見隱藏,我也嘗試設置風格display:none;沒有運氣。我也發現這個page,但那個有一個永久列表不會消失onmouseout。我應該只是將li標記着色爲與背景相同並使用它?div與鼠標懸停不顯示按預期?

<html> 
<head> 
</head> 
<style> 
body 
{  
    background-repeat:repeat; 
    background-color: white;  
} 
#container 
{  
    position: relative; 
    margin: 0 auto;  
    height: 100%; 
    width: 100%; 
} 
#menu 
{ 
    position: absolute;  
    margin: 0 auto;  
    height: 100px; 
    width: 300px; 
    top: 70%; 
    left: 40%; 
    background-color: white; 
    border:2px solid; 
    border-color: purple; 

} 
</style> 
<body>    
    <div id='menu' onMouseOver="this.style.visibility = 'visible';" onMouseOut="this.style.visibility = 'hidden';">menu</div>   
</body> 
</html> 

回答

0

使用jQuery

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
    </script> 
    <style> 
    body 
    {  
     background-repeat:repeat; 
     background-color: white;  
    } 
    #container 
    {  
     position: relative; 
     margin: 0 auto;  
     height: 100%; 
     width: 100%; 
    } 
    #menu 
    { 

     position: absolute;  
     margin: 0 auto;  
     height: 100px; 
     width: 300px; 
     top: 70%; 
     left: 40%; 
     background-color: white; 
     border:2px solid; 
     border-color: purple; 

    } 
    </style> 

    <script> 
    $(document).ready(function(){ 
     $("p").mouseover(function(){ 
     $("#menu").hide() 
     }); 
    $("p").mouseout(function(){ 
     $("#menu").show() 
     }); 
    }); 
    </script> 
    </head> 
    <body> 

    <p>Move the mouse pointer over this paragraph.</p> 
    <div id='menu' >menu</div> 
    </body> 
    </html>