在mouseover图像上显示div，在mouseout上隐藏div:nextSibling和previousSibli

Question

我有以下代码：

 <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>

div"内部块"的位置使其在u悬停时直接位于图像上方。因此，我们的想法是为图像设置一个onmouseover，弹出链接的"内部块"div，然后在链接上设置onmouseout，隐藏div并再次显示图像。

当我尝试使用elem.nextSibling时，我得到的错误是elem.next-Sibling未定义，因此您无法设置可见性。谢谢或者，有没有不同的方法可以做到这一点？非常感谢。

Answer 1

我认为你下一步和上一步错了Sibling在同一个父级上工作但是您的<div class="inner-block" onmouseout="hideDiv(elem)">没有同级

更多详细信息：http://www.w3schools.com/dom/prop_node_nextsibling.asp

我认为您最好设置元素id并使用getElementById，而不是兄弟

Answer 2

好的，所以现在我得到了错误Uncaught ReferenceError: elem is not defined

请记住，始终修复出现的第一个错误。

好吧，我能得到的最接近的就是这个jsFiddle。

任何人都可以根据我的回答继续。

Answer 3

好吧，这是我的尝试：

        <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>

这是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>

几件事：我所做的主要改变是，我没有把函数放在锚标签上，而是把它们封装到自己的div中。我认为，如果你指定一个特定的区域，在这种情况下就是它周围的div，这会更好。如果说你不希望它是链接，而是某个部分，这对未来会更好。

我也使用了document.getElementById。我很确定用previousSibling和nextSibling是可能的（至于为什么有一个未定义的错误仍然让我有点困惑，所以我不得不更多地使用它），但总的来说，我认为这无论如何都是更好的风格。除非你总是想在元素之前和之后得到兄弟元素，否则我更希望你这样做——指定你想消失和重新出现的元素会更有条理。

现在链接不在图像的正上方。如果你想这样做，我认为你可以用绝对的定位或漂浮来发挥作用，但我会让你自己尝试。希望这能有所帮助。

Answer 4

好吧，我解决了这个问题。elem.nextSibling和elem.previousSibling都返回文本节点。

所以我最终使用

elem.nextSibling.nextSibling

和

elem.previousSibling.previousSibling

呜呜！始终调试-