JavaScript : mouseout event in Popup Bubble causing children to hide

Question

我遇到了一些事件传播的问题。当我 mouseover description div 中的子元素时，description div 以及 mouseovered 子元素得到 显示:无；。发生此事件后，选定的子项将保持不可见状态，直到页面刷新。 这是一个“工作”演示:

jsfiddle

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

我发现通过将 :before 添加到我的 css 中的 description div 并不是很好的解决方法。您可以在 jsfiddle CSS 部分找到此解决方法的注释。不幸的是，这会阻止在 Popup Bubble 中做任何事情(比如 href 点击)。我想保持这种简单和实用，没有任何解决方法。

Answer 1

使用 mouseleave 和 target this 而不是 e.target。 e.target 将等于您悬停的内容。

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

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