Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show hidden divs on mouseover?

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.

like image 802
Jack P. Avatar asked Apr 25 '10 04:04

Jack P.


People also ask

Can you hover a div?

To display div element using CSS on hover a tag: First, set the div element invisible i.e display:none;. By using the adjacent sibling selector and hover on a tag to display the div element.

Is hover same as mouseover?

1. Alternatively referred to as mouseover or mouse hover, hover describes the act of moving a mouse pointer over a clickable object, but not actually clicking the left or right mouse button.

Can a div be hidden?

The hidden attribute hides the <div> element. You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <div> element is not visible, but it maintains its position on the page.


1 Answers

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';" 
like image 174
Daniel Vassallo Avatar answered Sep 23 '22 13:09

Daniel Vassallo