Onmouseout event does not trigger all the times if the mouse is moving too fast.

The only way to get around that is to use top CCS styles that will act accordingly, such as visibility on or off of a specific item. This works well if you only have one DIV for example. But, if you have specific logic that request two div to have the visible style to become hidden at the same time, then it becomes difficult to use CSS for that.

So, basically, what I have now is this. Two DIVs are shown on the page. When the logic determines that one of the two needs to become hidden, the code will take care of the two by doing pretty much the same logic to make them invisible. But, the problem with handling that by code is if the mouse is moved too fast. This is a known issue of javascript and very difficult to work around.

Anyone would have an idea on how to have someting working?

For example, the answer on that page suggests to use CCS to benefit of high level hover detection:

http://stackoverflow.com/questions/10626429/onmouseout-event-not-triggered-when-moving-mouse-fast-gwt-all-browsers

As long as this is a single DIV, it works. But, if you have a more complex logic, I really do not think CSS can handle it on its own.

For example, my mouse out event has something like this:

function OnMouseOutNew(event)
{
   var e=event.toElement || event.relatedTarget
   while(e && e.parentNode && e.parentNode != window)
   {
      if (e.parentNode==oDiv || e==oDiv || e.parentNode==oDiv0 || e==oDiv0)
      {
         if(e.preventDefault) e.preventDefault()
         {
            return false
         }
      }
      e=e.parentNode
   }
   DeactivateMenuNew()
   return true
}

function DeactivateMenuNew()
{
   oDiv.style.visibility="hidden"
   oDiv.style.display="none"
   oDiv0.style.visibility="hidden"
   oDiv0.style.display="none"
   oToolbarImage.style.opacity=1
}

But, the mouse out event does not fire if this is too fast.