Unable to get mouseout to work properly on jquery Selectmenu

Question

I'm trying to get the Jquery Selectmenu plugin to expand when I mouse over but close again when I leave it.

I decided to use the MouseOver and MouseOut events along with the open and close commands.

Problem is with how it works. It seems to create a some sort of fake menu outside of the div so as soon as I move over the options the menu closes again.

I reproduced this in JsFiddle: http://jsfiddle.net/jc2bs/

I would love to be able to get this to work.

Also I would love if I was able to get it to close on mouseout if it was activated by a mouseover but not if it was activated by a click ( so if user clicked the menu it would stay open until he picked a option or clicked outside). But I guess that's a much more difficult scenario to solve.

Answer 1

For the first (sub)question you can use the solution below. That work fine for me:

$("body").on("mouseenter", "#sel-button", function() {
    $('#sel').selectmenu('open');
});

$("body").on("mouseleave", "#sel-button, #sel-menu", function() {
    if (!$('#sel-menu').is(':hover')) {
        $('#sel').selectmenu('close');
    }
});

So, ​what I did. First, I changed deprecated delegate methods with new on method. Then, I used mouseenter and mouseleave events instead of mouseover and mouseout (you can check in the docs why). Consider that submenu has ID (#sel-menu) which is created by concatenating your select element ID with "-menu". The same works for select button.

DEMO: http://jsfiddle.net/jc2bs/6/

---

Regarding the second (sub)question, we can use couple of tricks. One is using data to store a flag if the menu was clicked, and based on this decide whether to hide submenu on mouse leave or not.

DEMO: http://jsfiddle.net/jc2bs/7/

Answer 2

You can accomplish this by using the mouseleave event on the selectmenu itself to close the menu.

$('.ui-selectmenu-menu').on('mouseleave', function() {
    $('#sel').selectmenu('close');
});

Live: http://jsfiddle.net/5wExe/1

While your second requirement is theoretically possible I personally don't think that it's a good idea. Users wouldn't think to click the menu if it shows up onmouseover.