0

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)?

Ex-iT
  • 1,479
  • 2
  • 12
  • 20
qazerty23
  • 411
  • 2
  • 6
  • 16

1 Answers1

3

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/

kpblc
  • 903
  • 1
  • 8
  • 24
  • Thanks!! This is exactly what I as looking for! – qazerty23 Apr 23 '14 at 13:12
  • Indeed a better solution. – Prashant Apr 23 '14 at 13:15
  • @qazerty23 glad I could help! but better set classes to elements, and style throw them. set rules directly to elements, it's not wery good. good: .lol .lol-child{background: red} not wery good: .lol div{background: red} – kpblc Apr 23 '14 at 13:19