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 ?

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 ?

• javascript
• html
• css

• 1 how can you mouse over again after hide it? you cannot mouse over hidden elements. – Chamika Sandamal Commented Sep 17, 2011 at 16:36
• For explanatory purposes, the problem is that because your div is invisible, it does not track mouseOver events. – Devin Burke Commented Sep 17, 2011 at 16:37

2 Answers 2

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>

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