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“内部块”的位置使其在悬停时直接位于图像上方。因此，我们的想法是为弹出链接的“内部块”div的图像设置一个onmouseover，然后在隐藏div并再次显示图像的链接上onmouseout。

当我尝试使用elem.nextSibling时，我得到elem.nextSibling未定义的错误，因此您无法设置可见性。谢谢！或者，是否有不同的方法来做到这一点？谢谢！

4 个答案:

答案 0 :(得分：0)

答案 1 :(得分：0)

答案 2 :(得分：0)

答案 3 :(得分：0)

Answer 1

好的，现在我收到错误Uncaught ReferenceError: elem is not defined

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

好的，我能得到的最近的是this jsFiddle。

任何人都可以随心所欲地建立自己的答案。

Answer 2

我认为你的错误是nextSibling和previousSibling在同一个父级上工作但是你的<div class="inner-block" onmouseout="hideDiv(elem)">没有兄弟

更多细节： http://www.w3schools.com/dom/prop_node_nextsibling.asp

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

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

哇噢！总是调试 -

在鼠标悬停图像上显示div，在mouseout上隐藏div：nextSibling和previousSibling无效

4 个答案: