Question

我查看了this页面试图在菜单上做一个简单的鼠标工作（根据用户：sarfraz的回答）。我不确定我是否错过了JavaScript，但似乎应该没有。如果我加载页面，我会得到一个div，其中“菜单”写入一个框中，将鼠标移到它上面只保留一次。取下鼠标后，div框消失，再也看不见了。我已尝试弄乱visibility ID中的menu样式，将其设置为可见或隐藏，我也尝试过设置风格display:none;没有运气。我也发现了这个page但是有一个永久列表，它不会随onmouseout消失。我应该只将li标记与背景颜色相同并使用它吗？

<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>

Answer 1

当他获得visibility = hidden时，请不要使用mouseOver，因此代码不会运行

替代方案：http://jsfiddle.net/V5QrZ/

Answer 2

使用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>

使用鼠标悬停的div没有按预期显示？

2 个答案: