I am currently using $(document).ready(function() { var $tabs = $("#tabs").tabs({ selected: -1, event: 'mouseover', collapsible: true });
I have tried including a .mouseout(function(){ //$tabs.tabs('option', 'selected', -1); $tabs.tabs('select',-1); }); // Used various combos of these I can see that a mouseout event is fired, when you leave the tab and move your mouse into the now showing div and another mouseout event is fired when you leave that div. What is the correct way to hide that div on mouseout and basically set the tab group back to nothing selected once your focus is no longer on that tab group? I found some posts from February 08 and September 08 but none of those solutions worked. I was thinking that I could bind something to the "wrapper" but not sure how or if that would even be the correct way. <div class="wrapper"> <div id="tabs"> <ul> <li><a href="#tabs-1">Filter 1</a></li> <li><a href="#tabs-2">Filter 2</a></li> <li><a href="#tabs-3">Filter 3</a></li> </ul> <div id="tabs-1">html</div> <div id="tabs-2">html</div> <div id="tabs-3">html</div> </div> </div>