jQuery ui tabs mouseover and mouseleave

I'm looking to create a simple mouseleave feature to my jquery tabs. I've searched all day for a solution and nothing seems to work.

$( "#tabs" ).tabs({
    selected: -1,
    event: "mouseover"
});

This creates the preliminary functionality I'm looking for, however I would like the tabs to return to "selected:-1" on mouseleave.

Does anyone have a solution to what appears to be开发者_JAVA技巧 a simple problem?

Thanks Chris

Try this:

$( "#tabs" )
    .tabs({
        selected: -1,
        event: "mouseover"
    })
    .mouseleave(function(){
        $(this).tabs("option", "selected", -1);                           
    })
;

With the tabs("option", "selected", xxx), we change the selected tab (jquery ui documentation)

Hope this helps. Cheers

I was trying to accomplish the same thing that you wanted to do. I'm doing things a little bit differently, but i found a way to do it.

My setup goes like this. Tab 1 is actually hidden and is used as a default panel. Tab2 through Tab5 are my visible buttons. You hover over those and they show the div with its corresponding content.

So, I modified the code and put together my own solution because the solutions above didnt seem to work for me. It could be because of the way I am modifying that first tab.

I could not get "option", "selected" to do anything so i used this instead. I've tested this only in Chrome browser. It works great there.

This is all i need to do to get the initial default panel to show when you mouseout:

jQuery( "#tabs" ).tabs({ selected: -1, event: "mouseover" }).mouseleave(
       function(){ 
            jQuery(this).tabs( "option", "active", 0 ); console.log('out'); 
        });

Oddly enough .tabs("select","-1") actually goes to the first tab instead of the the initial state. There may be a better way, but this works:

http://jsfiddle.net/Nsdwh/

Basically when the mouse leaves, remove and re-add the tabs.

Does this work?

$("#tabs").mouseout(function () {
    selected: 1
}).mouseover(function () {
    selected: -1
});