CODEWITHSUNDEEP
javascripthtmlcss
user44444444
user44444444

Reputation: 827

onMouseOver and onMouseOut show and hide div

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 ?

Upvotes: 1

Views: 24595

Answers (2)

TheWiseG
TheWiseG

Reputation: 73

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

Upvotes: 0

Will
Will

Reputation: 20225

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>

Upvotes: 4

Related Questions