onMouseOver and onMouseOut show and hide div

Question

Ok what I want is when the user moves the mouse pointer over a certain div it should appear. And when the mouse leaves the div that div should disappear. This is what I have done so far.

<div id="center"  style="position:absolute; left:45%; top:35%;" onMouseOver=" document.getElementById('center').style.visibility = 'visible'" onMouseOut="document.getElementById('center').style.display = 'none'">

But my problem is that when the mouse leaves the div it disappears but when I again go over the div it does not appear. How can I fix that ?

Answer 1

When you hide the div, you will not be able to mouseover it again. That is usually the point of hiding an element, so that clients cannot access it. One thing you can do is add a container and attach the mouseover event to the container.

<div onmouseover="document.getElementById('center').style.visibility = 'visible'">
    <div id="center" onmouseout="this.style.visibility = 'hidden'">
    </div>
</div>

Answer 2

Try like this:

<div id="center"  style="position:absolute; left:45%; top:35%;background-color:#03C;width:400px;height:400px;opacity:0;" onMouseOver="document.getElementById('center').style.opacity = 1" onMouseOut="document.getElementById('center').style.opacity = 0">

I added a background color to the div and some dimension because if the div has nothing inside and no costraints for the dimension it collapse.

Hope this is useful