How to show hidden divs on mouseover?

Jack P. picture Jack P. · Apr 25, 2010 · Viewed 219.8k times · Source

How to show a set of hidden div's onmouseover?

For example :

<div id="div1">Div 1 Content</div>
<div id="div2">Div 2 Content</div>
<div id="div3">Div 3 Content</div>

All div's need to be shown onmouseover event.

Answer

Daniel Vassallo picture Daniel Vassallo · Apr 25, 2010

If the divs are hidden, they will never trigger the mouseover event.

You will have to listen to the event of some other unhidden element.

You can consider wrapping your hidden divs into container divs that remain visible, and then act on the mouseover event of these containers.

<div style="width: 80px; height: 20px; background-color: red;" 
        onmouseover="document.getElementById('div1').style.display = 'block';">
   <div id="div1" style="display: none;">Text</div>
</div>

You could also listen for the mouseout event if you want the div to disappear when the mouse leaves the container div:

onmouseout="document.getElementById('div1').style.display = 'none';"