Hide/Show UI elements by MouseOut/MouseOver client handlers

Question

The goal is to mutually replace two elements with each-other by MouseOut/MouseOver events. Specifically the elements are a label and a listbox. There are some UI arrangement in which the implementation works acceptably in Chrome, however it always fails in IE(9). The problem occurs during a selection from the listbox as per browsers ignor the dropped down area as part of the listbox, it triggers the mouseOut handler and hides the listbox.

Is there any solution forcing browsers to consider the listbox together with its dropped down area?

app.createListBox() .setId('listBox');
app.createLabel('Item1') .setId('label')
    .addMouseOverHandler(app.createClientHandler()
                         .forEventSource().setVisible(false)
                         .forTargets(app.getElementById('listBox')).setVisible(true));
app.getElementById('listBox')
    .addItem('Item1')
    .addItem('Item2')
    .setVisible(false)
    .addMouseOutHandler(app.createClientHandler()
                        .forEventSource().setVisible(false)
                        .forTargets(app.getElementById('label')).setVisible(true));

Many Thanks

Answer 1

there is a possible workaround using a server handler to hide the listBox. From my tests it behaves quite similarly (if not better ) - you can test it here

function doGet() {
  var app = UiApp.createApplication().setStyleAttribute('padding','100px');
  var p = app.createVerticalPanel();
  var serverHandler = app.createServerHandler('handler').addCallbackElement(p)
  var listBox = app.createListBox() .setId('listBox').setName('listBox').addChangeHandler(serverHandler);  
  var label = app.createLabel('Item1').setId('label')
    .addMouseOverHandler(app.createClientHandler()
                         .forEventSource().setVisible(false)
                         .forTargets(listBox).setVisible(true));

  listBox.addItem('Item1').addItem('Item2').addItem('Item3').addItem('Item4')         
              .setVisible(false)

  p.add(listBox).add(label)
  app.add(p)
  return app                       
}

function handler(e){
  var app = UiApp.getActiveApplication();
  var listBox = app.getElementById('listBox')
  var label = app.getElementById('label')
  listBox.setVisible(false)
  label.setVisible(true).setText(e.parameter.listBox)
  return app
}