Show div on mouseover image, hide div on mouseout: nextSibling and previousSibling not working

Question

I have the following code:

 <div class="outer-div">
     <img onmouseover="showDiv(this)" src="{{ STATIC_URL }}/images/user_male.png">
     <a onmouseout="hideDiv(this)" href="{% me.some_url %}" style="display: block;">
         <div class="inner-block" onmouseout="hideDiv(elem)">
             <h5>{{ me.title }}</h5>
             <p>{{ me.text }}</p>
             <p>about ? ago</p>
         </div>
     </a>
     <div>
            <p>Comments</p>
            <p>Likes</p>
    </div>
</div>



<script>
function showDiv(elem) {
    elem.style.visibility="hidden";
    elem.nextSibling.style.visibility="visibile";
}

function hideDiv(elem) {
    elem.style.visibility="hidden";
    elem.previousSibling.style.visibility="visibile";
}
</script>

the div "inner-block" is positioned so it goes directly above the image when u hover. So, the idea is to have an onmouseover for the image that pops up the linked "inner-block" div, and then onmouseout on the link that hides the div and shows the image again.

When I try to use elem.nextSibling, I get the error that elem.nextSibling is undefined, and thus you can't set the visibility. Thanks! Alternately, is there a different way to do this? thank you!

Answer 1

Well, I figured out the problem. elem.nextSibling and elem.previousSibling were both returning text nodes.

So I ended up using

elem.nextSibling.nextSibling

and

elem.previousSibling.previousSibling

Woohoo! always debug-