how can i change this code to make mouse over tabs?

jQuery(document).ready(function(){
    var panelContainer = jQuery('div#panels');
    jQuery('<div id="tabs"></div>').insertBefore(panelContainer);   
    panelContainer.find('div.panel').each(function(n){
        jQuery('div#tabs').append('<a class="tab" href="#' + (n+1) + '">' + jQuery(this).attr('title') + '</a>');
    });

    var panelLocation = location.hash.slice(1);
    if(panelLocation){
        var panelNum = panelLocation;
    }else{
        var panelNum = '1';
    }
    panelContainer.find('div.panel').hide();
    panelContainer.find('div开发者_JS百科.panel:nth-child(' + panelNum + ')').fadeIn('slow');
    jQuery('div#tabs').find('a.tab:nth-child(' + panelNum + ')').removeClass().addClass('tab-active');
    jQuery('div#tabs').find('a').each(function(n){
        jQuery(this).click(function(){
            panelContainer.find('div.panel').hide();
            panelContainer.find('div.panel:nth-child(' + (n+1) + ')').fadeIn('slow');
            jQuery(this).parent().find('a').removeClass().addClass('tab');
            jQuery(this).removeClass().addClass('tab-active');
        });
    });
});

---

inside jQuery('div#tabs').find('a').each(function(n){ and after (or before) click handling

add this code:

jQuery(this).mouseover(function(){/* stuff */})