Question

I got a quick question. I’m making some sort of simple image gallery.
I got a div with a picture in it. When I hover the div another small div will go from display:none to displaye:block so it shows up above the image with half opacity. This div contains some info about the image

the code:

<div class="box col6" 
onmouseover="document.getElementById('onhover').style.display = 'block';" 
onmouseout="document.getElementById('onhover').style.display = 'none';">

<div id="onhover" style="display:none;">THIS IS THE DIV THAT WILL SHOW UP ON HOVER OF BOX COL6</div>

<img src="img/final.png" width="762" height="601">
</div>

This all works fine. But now I want to do this for multiple div with images. It wont work by just copying this div because the onmouseover and out wont know which “onhover” div they got to change.

Does anybody know a solution?

Answer 1

Use some CSS magic:

<div class="box col6">
    <div class="onhover">
        THIS IS THE DIV THAT WILL SHOW UP ON HOVER OF BOX COL6
    </div>
    <img src="img/final.png" width="762" height="601">
</div>

CSS

.box .onhover {display: none;}
.box:hover .onhover {display: block;}

Demo: http://jsfiddle.net/maniator/SLfK7/