jQuery - if no element is being called?

Question

i have a script where if you hover over a certin element, a unique DIV is displayed, and the others hide...very simple...

on page load, i call a div as the "intro" shown div....

what i want to accomplish, is if the other 5 elements are not being hovered over, it is displaying the intro div...

so, essentially in layman's terms:

show intro div if mouseover this div class, show this div ID, if not show intro div.

here is what i am using so far:

$(document).ready(function() {

$('.intro').show();

$('li.members, li.members-active').hover(function() {
    $('.members-show').show();
    $('.brokers-show').hide();
    $('.providers-show').hide();
    $('.employers-show').hide();
    $('.seniors-show').hide();
    $('.all').hide();
    return false;
  });



$('li.brokers, li.brokers-active').hover(function() {
    $('.brokers-show').show();
    $('.members-show').hide();
    $('.providers-show').hide();
    $('.employers-show').hide();
    $('.seniors-show').hide();
    $('.all').hide();
    return false;
  });

$('li.providers, li.providers-active').hover(function() {
    $('.providers-show').show();
    $('.brokers-show').hide();
    $('.members-show').hide();
    $('.employers-show').hide();
    $('.seniors-show').hide();
    $('.all').hide();
    return false;
  });

$('li.employers, li.employers-active').hover(function() {
    $('.employers-show').show();
    $('.brokers-show').hide();
    $('.providers-show').hide();
    $('.members-show').hide();
    $('.seniors-show').hide();
    $('.all').hide();
    return false;
  });

$('li.seniors, li.seniors-active').hover(function() {
    $('.seniors-show').show();
    $('.brokers-show').hide();
    $('.providers-show').hide();
    $('.employers-show').hide();
    $('.members-show').hide();
    $('.all').hide();
    return false;
  });

});

Answer 1

You can simplify this significantly:

$(document).ready(function() {

    $('.intro').show();    // Show the intro by default
                           // Ideally, you'd skip this step and just make sure
                           // the intro was visible on load anyway

    $('li').hover(function() {   // Bind an event handler to every item you want to toggle            
        var associatedDivClass = $(this).attr('class').replace('-active', '-show');
        $('.' + associatedDivClass).show();
        $('.intro').hide();
    });
    $('li').mouseout(function() {
        var associatedDivClass = $(this).attr('class').replace('-active', '-show');
        $('.' + associatedDivClass ).hide();
        $('.intro').show();
    });

});

Restrict the 'li' selector as needed so you just target the items you want to toggle.