div with mouseover does not show as expected?

StackOverflow https://stackoverflow.com/questions/21641995

Pregunta

I looked over this page trying to make a simple mouse over menu work (based on the user:sarfraz' answer). I'm not sure if I'm missing the JavaScript but it seems there shouldn't be any. If I load the page I get a div with "menu" written into a box and moving the mouse over it keeps it there only once. After the mouse is taken off the div box vanishes never to be seen again. I've tried messing with the visibility style in the menu id, setting it to visible or hidden and I've also tried setting the style display:none; with no luck. I also found this page but that one has a permanent list which doesn't vanish with onmouseout. Should I just color the li tag the same as the background and use that?

<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>
¿Fue útil?

Solución

When he gets visibility = hidden, do not be mouseOver, so the code does not run

Alternative: http://jsfiddle.net/V5QrZ/

Otros consejos

Use 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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top