弹出框中的mouseout事件导致儿童隐藏

Question

我有一些事件传播的问题。当我mouseover是descriptiondiv中的子元素时，descriptiondiv和mouseovered子元素都得到display:none;。此事件发生后，所选子节点将保持不可见，直到页面刷新。下面是一个"工作"演示:

jsfiddle

我认为主要原因是在jsfiddle上的JS代码的第8-15行之间，如果在鼠标光标下没有找到descriptiondiv，则mouseout会立即触发。

我发现通过在我的css中添加:before到descriptiondiv并不优雅。您可以在jsfiddle CSS小节中找到这个解决方法的注释。不幸的是，这阻止了在弹出式气泡中做任何事情(如href点击)。我想保持这个简单和功能，没有任何变通

Answer 1

使用mouseleave和target来代替e.target。目标将等于你悬停的位置

https://jsfiddle.net/gfvq9yvp/6/

     e.target.children[a].addEventListener("mouseleave",function(e){
         this.style.display="none";
     }, false);