JavaScript display child div on mouseover

Question

I have the following HTML:

<div id="wrapper">
    <div onmouseover="displayDiv()">  <div id="thisIsTheDivToDisplay"></div   </div>
    <div onmouseover="displayDiv()">  <div id="thisIsTheDivToDisplay"></div>  </div>
    <div onmouseover="displayDiv()">  <div id="thisIsTheDivToDisplay"></div>  </div>
    <div onmouseover="displayDiv()">  <div id="thisIsTheDivToDisplay"></div>  </div>
</div>

I want to display the div inside, when I mouseover it's parent div. But I'cant use ID's, because the number of div's is random (depends on values in database). Is there any way in JavaScript to display that only child div (depending on div I mouseover)?

Answer 1

why you need to use js? it can be solved via css. here is fiddle with working example

<div class="lol">
    <div>lol</div>
</div>

<div class="lol">
    <div>lol</div>
</div>

<div class="lol">
    <div>lol</div>
</div>


.lol{width:100px;height:100px; background:red;margin:10px}
.lol div{display:none}
.lol:hover div{display:block} 

http://jsfiddle.net/kpblc/4Vfra/