javascript - Erratic mouseover behavior with nested items inside mouseover layer -

so let's have:

• a container everything
• a basediv inside container

//let's create base layer var container = document.getelementbyid('container') var basediv = document.createelement('div') basediv.id = 'basediv' basediv.innertext = 'this base div' basediv.addeventlistener('mouseover', createlayer) container.appendchild(basediv) 

when user mouses over:

• a layerontop, of same size put on top of basediv.

when user mouses out:

• the layerontop removed.

function createlayer(){     console.log('creating layer')     layerontop = document.createelement('div')     layerontop.id = 'layerontop'     layerontop.addeventlistener('mouseout',                    function(){                       console.log('removing layer')                       return layerontop.parentelement.removechild(layerontop)                            })     container.appendchild(layerontop) } 

simple , works great.

• however, when layerontop contains elements (buttons, inputs), behavior gets erratic , starts flicking you're technically exiting layerontop.

//it contains 2 textareas layerontop.appendchild(document.createelement('textarea')) layerontop.appendchild(document.createelement('textarea')) 

i wish use mouseenter doesn't seem supported chrome.

here's jsfiddle: http://jsfiddle.net/djrbp/

how can stop this? wish merge textareas , layerontop 1 large mouseover-handling conglomerate.

you need check in mouse out event it's leaving element. change mouseout function to:

function(event) {     var e = event.toelement || event.relatedtarget;     if (e.parentnode == || e == this) {         // we're not leaving parent node don't remove layer         return;     }      console.log('removing layer')     return layerontop.parentelement.removechild(layerontop) })