To add more information, I have attached an image showing the toolbar part, which is div #1, and the second div, represented by a color.

The second div, the one in color, is defined like this:

<div id="Recent" style="visibility: hidden; background-color: #ff00ff; width: 100px; height: 100px;">
</div>

So, there is nothing inside that div. There are no child elements. So, this avoids any potential conflicts in the target because it is just the div.

The onmouseout of the toolbar is very simple:

   oToolbarTR.onmouseout=function(e) {ToolbarOnMouseOut(e)}

And, the onmouseout function is like this:

function ToolbarOnMouseOut(event)
{
   var e=event.toElement || event.relatedTarget
   if (e)
   {
      alert(e)
   }
   if (event)
   {
      alert("Event")
      alert(event)
      alert(event.region)
      alert(event.relatedTarget)
   }

Basically, as soon as the cursor touches the color region, the mouse out is called:

1. e is not an object
2. event is an object of type mousemove
3. event.region is undefined
4. event.relatedTarget is null

So, something is missing here.