Imagine a scenario where we have the following elements:
- A container that holds everything
- A baseDiv inside that container
// Let's create a base layer var container = document.getElementById('container') var baseDiv = document.createElement('div') baseDiv.id = 'baseDiv' baseDiv.innerText = 'this is the base div' baseDiv.addEventListener('mouseover', createLayer) container.appendChild(baseDiv)
When the user hovers over the baseDiv:
- A layerOnTop, of the same size, is placed on top of the baseDiv.
When the user moves the mouse away:
- The layerOnTop is 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 and effective.
- However, when layerOnTop contains additional elements (such as buttons or inputs), the behavior becomes erratic and flickers due to technically exiting the layerOnTop.
// it includes two textareas layerOnTop.appendChild(document.createElement('textarea')) layerOnTop.appendChild(document.createElement('textarea'))
Using mouseenter would solve this issue, but unfortunately, it is not supported by Chrome.
Here's the link to my jsfiddle: http://jsfiddle.net/DjRBP/
How can I resolve this problem? Is there a way to combine the textareas and layerOnTop into a single entity for better mouseover handling?