嵌套跨度鼠标悬停问题IE

我有嵌套span元素，并有父跨度嵌套跨度鼠标悬停问题IE

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

我显示上mouseoverchild跨度上parent跨度从parent隐藏它mouseoutmouseover和mouseout事件。

这一切都只要鼠标过来子元素IE认为它作为了从父鼠标等隐藏子工作的罚款在Firefox和Chrome，但在IE。

是否有任何解决方法或正确的方式来做到这一点的IE浏览器？

我可以把同样的事件在孩子跨度应该在IE浏览器，但也将是这样做的正确方法？从父DIV使用CSS

来源

2016-04-25 Pawan Nogariya

你能为此创建一个小提琴吗？ –

找到了解决方法。

我用div和display:inline-block替换了父跨度，它现在在各地都在使用！

谢谢！

来源

2016-04-25 10:17:17

删除指针事件：

#parent * { 
    pointer-events: none; 
}

来源

2016-04-25 09:40:21

这只适用于IE11，因为他有问题与IE浏览器。 –

您可以通过使用onmouseleave，而不是onmouseout可能解决这个问题：

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

以上不会触发hideChild()当你将鼠标悬停在孩子身上，但在父母和孩子之间移动时会触发showChild()。

为了避免这种情况，可以用onmouseenter替代onmouseover：

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

检查这个fiddle。打开输出的控制台。

来源

2016-04-25 09:41:36 Chris

这也是一个很好的解决方案:) –

这是奇怪的，你的解决方案是在小提琴的工作，但是当我在我的代码试了一下它仍然没有工作:( –

奇怪。什么版本的IE浏览器，你呢？ – Chris

那么在这种情况下，你只需要检查事件目标是不是孩子，使用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。

来源

2016-04-25 09:49:45

嵌套跨度鼠标悬停问题IE

回答

相关问题