0

我有以下代码：

 <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“inner-block”被定位，所以当你悬停时它直接在图像上方。因此，想法是对弹出链接的“内部块”div 的图像进行 onmouseover，然后在隐藏 div 并再次显示图像的链接上进行 onmouseout。

当我尝试使用 elem.nextSibling 时，我收到 elem.nextSibling 未定义的错误，因此您无法设置可见性。谢谢！或者，有没有其他方法可以做到这一点？谢谢你！

4

4 回答 4

0

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

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

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

任何人都可以根据我的答案随意构建。

于 2012-08-20T03:01:28.140 回答
0

我认为你弄错了 nextSibling 和 previousSibling 在同一个父母身上工作，但你<div class="inner-block" onmouseout="hideDiv(elem)">没有兄弟姐妹

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

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

于 2012-08-20T03:17:52.553 回答
0

好吧，这是我的尝试：

        <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 做到这一点（至于为什么有一个未定义的错误仍然让我感到困惑，所以我不得不更多地使用它）但总的来说我认为这是更好的风格。除非你总是想在元素之前获得兄弟姐妹，在元素之后获得兄弟姐妹，否则我更希望你这样做——指定要消失和重新出现的元素更有条理。

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

于 2012-08-20T09:24:51.963 回答
0

好吧，我发现了问题所在。elem.nextSibling 和 elem.previousSibling 都返回文本节点。

所以我最终使用

elem.nextSibling.nextSibling

和

elem.previousSibling.previousSibling

呜呼！总是调试-

于 2012-08-21T18:10:31.567 回答