active on hover

Question

I want to create a tabbed window. with 3 tabs, Blue, Green and Red. the first tab, Blue and its content are selected default.

I need a jQuery script to do this job: When mouse goes on each tab, the title should be selected (selected class) and the content shows; and when mouse goes out (from title or content), after 500 milliseconds, default tab should be selected. (the most important thing: when the mouse goes down from title to content, content shouldn't hide. if mouse completely goes out, the default should show)

Another thing is it, if use click on the selected title or content, default should change to current selected tab.

I create this fiddle, for example.

Thanks, a lot.

Answer 1

Here is an example using jQuery UI's Tabs:

http://jsfiddle.net/lbstr/Xkjbq/8/

Once you set up the html structure like they have it in their examples, all you have to do is this

$('#tabs').tabs({event: "mouseover"});

and your done, son.