div с наведением мыши не показывает, как ожидалось?

Я просмотрел эту страницу, пытаясь заставить работать простую мышь над меню (основываясь на ответе пользователя:sarfraz'). Я не уверен, что мне не хватает JavaScript, но, похоже, их не должно быть. Если я загружаю страницу, я получаю div с "меню", записанным в поле, и перемещением мыши над ним, оно остается там только один раз. После того, как мышь снята с div коробка исчезает, чтобы никогда не быть увиденным снова. Я пытался возиться с visibility стиль в menu id, установив его в видимый или скрытый, и я также попытался установить стиль display:none; без удачи Я также нашел эту страницу, но у нее есть постоянный список, который не исчезает с 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>
Источник

2 ответа

Решение

Когда он получает visibility = hidden, не надо MouseOver, поэтому код не запускается

Альтернатива: http://jsfiddle.net/V5QrZ/

Источник

Используйте 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>
Источник
Другие вопросы по тегам