Javascript – How to solve – DIV element flashes/disappears immediately after it is rendered

javascriptjavascript-events

Here's what is happening

  • After the page loads, javascript reads an XML from the underlying code
  • The XML contains a bunch of field-ids, and corresponding content to display in popups when the mouse hovers over a field id listed

My code generates a bunch of popups as div-elements with the styles

.render{
 background-color:    #fffc80;
 border:             .1em solid rgb(200, 128, 0);
 padding-left:        2px;
 padding-right:       2px;
 z-index:             1000;
}

.hide{
 display:none;
}

All created popups are attached to the root element.

EDITED: Added script snippets

The event handlers are attached as below

// instantiate a div element

var myDiv = document.createElement('div');

// generate an ID 

myDiv.id = generatePopupId(getFieldId());

// attach the content from the XML into the new div element

myDiv.innerHTML = getPopupContent();

// apply mouseover/out handlers to the main element

document.getElementById(getFieldId()).onmouseover = function(){
  showPopup(generatePopupId(getFieldId()));
};

document.getElementById(getFieldId()).onmouseout = function(){
  hidePopup(generatePopupId(getFieldId()));
}; 


// read the X coordinate of the present position of the mouse

function getX(){
  var e = window.event;
  posX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  return posX;
}

// read the Y coordinate of the present position of the mouse

function getY(){
  var e = window.event;
  posY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  return posY;
}

// Show the popup element at the current mouse location

function showPopup(popupId){
  var posX = getX();
  var posY = getY();

  var poppyElement = document.getElementById(popupId);

  poppyElement.className = 'render';
  poppyElement.style.left = posX;
  poppyElement.style.top  = poxY;
  poppyElement.style.position = 'absolute';
  poppyElement.style.display = '';

}

// hide the popup element

function hidePopup(popupId){
  var poppyElement = document.getElementById(popupId);

  poppyElement.className = 'hide';

}

My question is – Why does the element flash, and disappear immediately instead of hanging around for the mouse-out event?

Regards,
Abhishek

Best Solution

Changing the elements in the JavaScript may be modifying the element being hovered over, which may trigger the mouse out event by changing, rather than actually moving the mouse out of the co-ordinates.