Question

I have nested span elements and have mouseover and mouseout events for the parent span

<span id='parent' onmouseover='showChild()' onmouseout='hideChild()'>
    <span id='child'></span>
</span>

I am showing child span on mouseover on parent span and hiding it on mouseout from parent.

This all is working fine in firefox and chrome, but in IE as soon as mouse comes over child element IE considers it as mouse out from parent and so hide the child.

Is there any work around or the correct way to do this for IE?

I can put the same events in child span and that should work in IE also but would it be the right way to do this?

Answer 1

You can probably fix this by using onmouseleave instead of onmouseout:

<span id='parent' onmouseover='showChild()' onmouseleave='hideChild()'>
    <span id='child'></span>
</span>

The above won't trigger the hideChild() when you hover over the child, but it will trigger the showChild() when moving between the parent and the child.

To prevent this, you can replace onmouseover with onmouseenter:

<span id='parent' onmouseenter='showChild()' onmouseleave='hideChild()'>
    <span id='child'></span>
</span>

Check this fiddle. Open the console for the output.

Answer 2

找到了解决方法。

我用div替换了display:inline-block的父级，现在到处都是！

谢谢！

Answer 3

Remove pointer events from parent div using css:

#parent * {
     pointer-events: none;
}

Answer 4

在这种情况下，你只需要使用 Event.target 检查事件目标是否不是孩子。

这是一个有效的片段：

function showChild(e) {
  e = e || window.event;
  var child = document.getElementById("child");
  if (e.target !== child) {
    child.style.display = "inline-block";
  }
}

function hideChild(e) {
  e = e || window.event;
  var child = document.getElementById("child");
  if (e.target !== child) {
    child.style.display = "none";
  }
}

#parent {
  background-color: yellow;
  width: 300px;
  display: block;
  height:100px;
}
#child {
  background: blue;
  color: white;
  width:auto;
  height:auto;
}

<span id="parent" onmouseover="showChild(event)" onmouseout="hideChild(event)">Parent
    <span id="child">Child</span>
</span>

这将为您提供所需的信息。

注意：

在Firefox中，您应该将event参数传递给您的函数，例如showChild(event)，否则它会声明事件e is undefined。

Nested span mouseover issue in IE

4 个答案: