How to handle MouseOut action in GWT with inner layers

Recently i had to face the following problem:
I had one panel which contained a picture with some other functionality. Additional two panels were to appear on top of that panel when the mouse was over the first panel and disappear when the mouse left it. Sound simple enough but the problem was that when one moved the mouse over the inner panels the MouseOut event was still triggered, which cause flickering of the panels and unwanted behaviour.

My solution:

I took all three panels and wrapped them up in one parent panel while setting their positions with CSS (if you use an AbsolutePanel you can also position them using the supplied methods like: 'setWidgetPosition(w, left, top)').

Once that I had the parent panel I did the standard 'sinkEvents(Event.MOUSEEVENTS);' in the constructor, in order to forward the needed events. Finally i added:

@Override
public void onBrowserEvent(Event event) {
switch (DOM.eventGetType(event)) {
case Event.ONMOUSEOVER: {
/* Show the two panels */
break;
}
case Event.ONMOUSEOUT: {
if(Element.is(event.getRelatedEventTarget())) {
/*
Get the related target, which is the element being entered, and
then cast the EventTarget to com.google.gwt.user.client.Element.
*/
Element el = event.getRelatedEventTarget().cast();
boolean toHide = true;
/*
Go through all the elements in the tree towards the root, in
order to be sure that 'el' is not a child of the current class.
If it is a child we should not hide the other two panels
*/
while(el != null) {
if(DOM.isOrHasChild(getElement(), el)) {
toHide = false;
break;
}
el = (Element) el.getParentElement();
}

if(toHide) {
/* Hide the two panels */
}
}
break;
} default: {
}
}
}

Note that the code is not complete, omitting the details from my implementation.

Links:
relatedTarget method
GWT Widget
Element
Event
NativeEvent