Selectmenu Mouseout

Mouseout not working properly with Selectmenu

by thecodeparadox

HTML

<script src="https://raw.github.com/fnagel/jquery-ui/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<link rel="stylesheet" href="https://raw.github.com/fnagel/jquery-ui/selectmenu/themes/base/jquery.ui.selectmenu.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js"></script>
<div id="theseldiv">
<select id="sel">
    <Option>option1</Option>
    <Option>option2</Option>
    <Option>option3</Option>
</select>
</div>

CSS

/* Selectmenu
----------------------------------*/
.ui-selectmenu { display: block; display: inline-block; position: relative; height: 2.2em; vertical-align: middle; text-decoration: none; overflow: hidden; zoom: 1; }
.ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top: 50%; }
.ui-selectmenu-menu { padding:0; margin:0; position:absolute; top: 0; display: none; z-index: 1005;} /* z-index: 1005 to make selectmenu work with dialog */
.ui-selectmenu-menu  ul { padding:0; margin:0; list-style:none; position: relative; overflow: auto; overflow-y: auto ; overflow-x: hidden; } 
.ui-selectmenu-open { display: block; }
.ui-selectmenu-menu-popup { margin-top: -1px; }
.ui-selectmenu-menu-dropdown { }
.ui-selectmenu-menu li { padding:0; margin:0; display: block; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; border-right-width: 0 !important; border-left-width: 0 !important; font-weight: normal !important; }
.ui-selectmenu-menu li a,.ui-selectmenu-status { line-height: 1.4em; display: block; padding: .405em 1em; outline:none; text-decoration:none; }
.ui-selectmenu-menu li.ui-state-disabled a, .ui-state-disabled { cursor: default; }
.ui-selectmenu-menu li.ui-selectmenu-hasIcon a,
.ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 20px; position: relative; margin-left: 5px; }
.ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; }
.ui-selectmenu-status { line-height: 1.4em; }
.ui-selectmenu-open li.ui-selectmenu-item-focus a { }
.ui-selectmenu-open li.ui-selectmenu-item-selected { }
.ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; }
.ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; }
.ui-selectmenu-menu li .ui-selectmenu-item-content { }
.ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; }
/* for optgroups */
.ui-selectmenu-menu .ui-selectmenu-group { font-size: 1em;...

JavaScript

$(function () {
    console.log($('ul').children('li'));
     $('#sel').selectmenu({
        width: 250
    });
    $('body').delegate('#theseldiv', 'mouseover', function () {
        $('#sel').selectmenu('open');
    });
    $('body').delegate('#theseldiv', 'mouseout', function () {
        if(!$('#sel').hasClass('clicked')) {
          $('#sel').selectmenu('close');
        } 
    });
    $('body').on('click', '#sel', function () {
        alert('hello');
        $('#sel').addClass('fffffffff');
    });
});