css - JavaScript : mouseout event in Popup Bubble causing children to hide -

i have problem event propagation. when mouseover child element in description div, description div mouseovered child gets display:none;. after event occurs selected child remain invisible until page refresh. here "working" demo:

jsfiddle

i believe main cause of somewhere between lines 8-15 of js code on jsfiddle themouseout triggers in case of not finding description div under mouse cursor.

i have found not elegant workaround adding :before description div in css. can find workaround commented in jsfiddle css section. unfortunately prevents of doing in popup bubble (like href clicking). want keep simple , functional, without workarounds.

use mouseleave , target instead of e.target. e.target equal hovering.

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

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