Question

在下面的标记中，“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>

Answer 1

您的代码无法在任何现代浏览器中使用。 firstChild返回元素中的第一个节点。此节点也可以是textnode，在您的情况下它是new line + TAB。文本节点没有设置style，因此代码将失败。

改为使用firstElementChild。

同样代表nextSibling，改为使用nextElementSibling。

A live demo at jsFiddle

Answer 2

这结果是IE上的z索引问题。我在悬停s下有一个图像，无论出于何种原因，它都会遮住我的悬停按钮。所以我删除了那个图像并用背景图像创建了另一个div。

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

2 个答案: