Javascript this.firstChild .nextSibling 在 Internet Explorer 中不起作用答案

【问题标题】：Javascript this.firstChild .nextSibling Not Working in Internet ExplorerJavascript this.firstChild .nextSibling 在 Internet Explorer 中不起作用
【发布时间】：2013-08-20 21:40:47
【问题描述】：

在以下标记中，“tip1”的可见性应该从“隐藏”更改为当父级鼠标悬停时显示。然后当点击“tip1”时，应该会出现“line1”。它在 Firefox 和 Chrome 中运行良好，但在 IE 中当然不行。

<div id="product-description" style="position:relative; float:left; width:35%">
   <div onmouseover="display(this.firstChild)" onmouseout="getRid(this.firstChild)" style="position:absolute; left:146px; top:29px; z-index:2000">
   <div id="tip1" onclick="showTip(this.nextSibling)">
      <img "shadow.png" />
   </div>
   <div id="line1" style="position:absolute; left:15px; top:-5px;" onclick="closeTip(this)">
      <img "fb.png" />
   </div>
</div>
</div>

这里是对应的javascript：

<script>
function display(items){items.style.visibility = "visible";}
function getRid(items){items.style.visibility = "hidden";}
function showTip(tip){tip.style.visibility = "visible";}
function closeTip(tip){tip.style.visibility = "hidden";}
</script>

【问题讨论】：

您的 HTML 标记已损坏。您需要为 product-description div 和带有 onmouseover 和 onmouseout 事件处理程序的 div 添加结束标签。此外，img 标签需要src 属性。如果修复后问题仍然存在，请提供有效的标记。
请确保包含您收到的任何错误，并说明您为解决问题所做的工作。
对不起，我是新来在这里发帖的...我没有将结束的
间隔超过 4 次，所以它们被排除在外。此外，编辑对我大喊大叫，说在我达到“10”名声之前无法在此处发布图像，所以我只是关闭了 src 属性。该代码在 FF 和 Chrome 上正常运行，而不是 IE。在修复方面，我尝试使用 childNodes[0] 而不是 firstChild 无济于事。

@user2701398 -- 不同的浏览器以不同的方式处理损坏的 HTML。它在一个浏览器中工作而在另一个浏览器中不起作用的事实就是证明。调试此类问题的第一步是使用HTML Validator 并修复标记。

标签： javascript internet-explorer css-selectors nextsibling

【解决方案1】：

您的代码无法在任何现代浏览器中运行。 firstChild 返回元素中的第一个节点。这个节点也可以是一个文本节点，在你的例子中它是一个new line + TAB。 Textnodes 没有要设置的style，因此代码会失败。

请改用firstElementChild。

nextSibling 也一样，请改用nextElementSibling。

A live demo at jsFiddle.

【讨论】：

因此，使用 firstElementChild 实际上解决了我遇到的另一个问题，由于您提到的原因，我不得不将所有标签混合在一起。但是，这仍然没有解决我的主要问题，因为它仍然无法在 Internet Explorer 上运行。会不会是“this”关键字的问题？

【解决方案2】：

这原来是 IE 上的 z-indexing 问题。我在 hover s 下有一个图像，无论出于何种原因，它一直掩盖我的悬停按钮。所以我删除了该图像并创建了另一个带有背景图像的 div。

【讨论】：