<div id="one-id">
<div id="some">Information</div>
<div id="control">
<div id="value-1">
<img id="image-one-id" />
<img id="image-two-id" />
<img id="image-three-id" />
</div>
<!-- this section will be displayed after mouseover on <img id="image-x-id" />, where each image-x-id will load its specific values -->
<div id="value-2">
<div id="value-one-id"></div>
<div id="value-two-id"></div>
<div id="value-three-id"></div>
</div>
</div>
</div>
<div id="two-id">
same procedure as above
</div>
etc...
Step 1:<div id="value-2"> will be shown by observing the mouseover event on <img id="image-x-id" /> and all values will remain visible. <img id="image-x-id" /> will have the class "selected".
Step 2: When hovering over <img id="image-x-id" /> inside <div id="two-id">, the <div id="value-2"> within <div id="one-id"> should disappear, and Step 1 will repeat for <div id="two-id">.
I could use some assistance because I'm getting confused with my nested divs.