JQuery UI SelectMenuをHoverで開く

Question

JQuery selectmenuを使用しています。マウスを離したときにマウスをホバーで開き、閉じます。

これは私が試したものです：

jQuery('.selectbox') 
    .selectmenu() 
    .selectmenu('widget').hover(function() { jQuery(this).selectmenu('open'); }); 

エラー：

jquery-1.12.3.min.js:2 Uncaught Error: cannot call methods on 
    selectmenu prior to initialization; attempted to call method 'open' 

しかし、私はselectmenuにそれを開くためにそのようにアクセスすることはできません。また、マウスをメニュー項目の上に移動すると、開いたままにする必要があると思いますか？

Answer 1

編集

はそれはとても

---

:-)このコードを使用する前に、私はそれとカスタムウィジェットを作成することができたことをご検討ください、これはとにかく悪いユーザー体験を提供してい判明しましたこのような機能：

jQuery.widget("custom.hoverSelectmenu", jQuery.ui.selectmenu, { 
    _create: function() { 
     this._super(); 
     var that = this; 
     this._on(this.button, { 
      mouseenter: function(event) { 
       that.open(); 
      }, 
      mouseleave: function(event) { 
       if (event.toElement != that.menu.get(0)) { 
        that.close(); 
       } 
      } 
     }); 

     this._on(this.menu, { 
      mouseleave: function(event) { 
       if (event.toElement != that.button.get(0)) { 
        that.close(); 
       } 
      } 
     }); 

    } 
}); 

jQuery('.selectbox').hoverSelectmenu({ 

}); 

更新

のFirefox、ChromeとIE 11で、次の作品は（下IEがテストされていません）

_leaveWidget: function(event) { 
    var target = event.toElement || event.relatedTarget || event.target; 
    if (!(
     jQuery.contains(this.button.get(0), target) || 
     jQuery(this.button.get(0)).is(target) || 
     jQuery.contains(this.menu.get(0), target) || 
     jQuery(this.menu.get(0)).is(target) 
    )) { 
     this.close(); 
    } 
}, 

_create: function() { 
    this._super(); 
    var that = this; 
    this._on(this.button, { 
     mouseenter: function (event) { 
      that.open(); 
     }, 
     mouseout: that._leaveWidget 
    }); 

    this._on(this.menu, { 
     mouseout: that._leaveWidget 
    }); 
},