Remember and show previously active nav-tab after hover mouseout?

Question

I have few sub-tabs(nav-pills) under every main tab(nav-tabs). And i want to show them on hover over main tab while going back to the active main-tab after hover.

I have written jquery for hover but not sure how to go back to the previous active tab.Problem is that on mouse hover , the last hovered tab stays active. My code is given below where

  $('.nav-tabs > li > a').hover(function () {
        //$($(this).attr('href')).show();
        $(this).tab('show');
    }, function () {
       // debugger;
        //if ($(this).hasClass('active')) {           //if ($(this).parent('li').hasClass('active')) {
        //    $($(this).attr('href')).show();
        //}
        //else {
        //    $($(this).attr('href')).hide();
        //}
    });

Answer 1

You will need to use a class to recall your previous state when you are done hovering.

$('.nav-tabs > li > a').hover(function () {
    $('.nav-tabs > li.active').addClass('lastActive');
    $(this).tab('show');
}, function () {
    $('.nav-tabs > li.lastActive').removeClass('lastActive').children('a').tab('show');
});

Also you will need to add a click event that removes your lastActive class.

$('.nav-tabs > li > a').click(function () {
    $('.nav-tabs > li.lastActive').removeClass('lastActive');
    $(this).tab('show');
});

Something like this :)