NightKn8 NightKn8 - 21 days ago 5
CSS Question

JavaScript : mouseout event in Popup Bubble causing children to hide

I have a problem with some event propagation. When I

mouseover
a child element in
description
div, the
description
div as well as
mouseovered
child gets
display:none;
. After this event occurs selected child will remain invisible until page refresh.
Here is a "working" demo:

jsfiddle

I believe that the main cause of this is somewhere between lines 8-15 of my JS code on jsfiddle where the
mouseout
triggers immediately in case of not finding
description
div under mouse cursor.

I have found not elegant workaround by adding
:before
to
description
div in my css. You can find this workaround commented in jsfiddle CSS section. This unfortunately prevents of doing anything in the Popup Bubble (like
href
clicking). I want to keep this simple and functional, without any workarounds.

Answer

Use mouseleave and target this instead of e.target. e.target will equal what you are hovering.

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

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