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-

Answer 2

Ok, so now I'm getting the error Uncaught ReferenceError: elem is not defined

Remember, always fix the first error that appears.

Ok the closest I can get is this jsFiddle.

Anyone feel free to build upon my answer.

Answer 3

I think you are getting it wrong nextSibling and previousSibling is work on the same parent but your <div class="inner-block" onmouseout="hideDiv(elem)"> has no sibling

more detail : http://www.w3schools.com/dom/prop_node_nextsibling.asp

I think you'd better set element id and use getElementById instead of sibling

Answer 4

Alright well here is my attempt:

        <div id="outer-div">
        <img id ="img" onmouseover="showDiv()" src="http://www.crunchbase.com/assets/images/resized/0004/1621/41621v6-max-250x250.jpg" style = "visibility:visible;"/>
        <div id="inner-block" onmouseout="hideDiv()" style="visibility:hidden;">
            <a href="http://www.stackoverflow.com" style="display: block;">
                 <div>
                     <h5>{{ me.title }}</h5>
                     <p>{{ me.text }}</p>
                     <p>about ? ago</p>
                 </div>
             </a>
        </div>
         <div>
                <p>Comments</p>
                <p>Likes</p>
        </div>
    </div>

And here is the javascript:

<script>
    function showDiv() {
        document.getElementById("img").style.visibility = "hidden";
        document.getElementById("inner-block").style.visibility = "visible";
    }

    function hideDiv() {
        document.getElementById("inner-block").style.visibility = "hidden";
        document.getElementById("img").style.visibility = "visible";
    }
</script>

Couple of things: main changes I did was instead of putting the function on the anchor tag, I encapsulated that all into its own div. I think this is a lot better if you specify a specific area which in this case is the div around it. This makes it better for the future if say you didn't want it to be links but a certain section, etc.

I also used document.getElementById. I'm pretty sure its possible to do it with previousSibling and nextSibling (as to why there was a undefined error still kinda confuses me so I'd have to play around with it more) but overall I think this is better style anyways. Unless you ALWAYS wanted to get the sibling before and the sibling after the element, I would prefer it you do it this way -- specifying which elements you want to disappear and reappear is a lot more organized.

Right now the links aren't directly above the image. If you want to do that, I think you could play around with absolute positioning or floats to get it to work but I'll let you try that for yourself. Hope this helps.