Question

If I have

function OnMouseIn (elem) {
            elem.style.display= "block";
        }


<div onmouseover="OnMouseIn (this.XXXXXXX)">
    <div class="classname" style="display:none"></div>
</div>

What do I have to write in place of XXXXXXX to select the div’s child “classname”?
(note: there are a lot of the first div, and i have to select only the one where the mouse just got over.

Answer 1

You don’t need javascript to do this, just use CSS:

<style type="text/css">
    .classname {
       display: none;
    }

    #parent:hover > div.classname {
       display: block;
    }
</style>

<div id="parent">
    <div class="classname"></div>
</div>

but in javascript it would be:

function OnMouseIn (elem) {
    elem.getElementsByTagName("DIV")[0].style.display = "block";
}
function OnMouseOut (elem) {
    elem.getElementsByTagName("DIV")[0].style.display = "none";
}


<div onmouseover="OnMouseIn (this);" onmouseout="OnMouseOut (this);">
    <div class="classname" style="display:none"></div>
</div>