0

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

2 回答 2

0

您的代码无法在任何现代浏览器中运行。firstChild返回元素中的第一个节点。这个节点也可以是一个文本节点，在你的情况下它是一个new line + TAB. Textnodes 不必style设置，因此代码将失败。

改为使用firstElementChild。

相同的代表nextSibling，nextElementSibling改为使用。

jsFiddle 的现场演示。

于 2013-08-21T04:25:05.623 回答
0

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

于 2013-08-21T15:34:09.053 回答