jQuery - Help combining multiple mouseenter/mouseleave events

Sorry if this is a noob question but is there a way to combine these mouseenter/mouseleave events?

$('.home').mouseenter(function(){
        $('#display_home:hidden').fadeIn(400); 
     }).mouseleave(function(){
         $('#display_home').hide()
     }); 

     $('.about').mouseenter(function(){
         $('#display_about:hidden').fadeIn(400);
     }).mouseleave(function(){
         $('#display_about').hide();
     });

     $('.contact').mouseenter(function(){
         $('#display_contact:hidden').fadeIn(400);
     }).mouseleave(function(){
         $('#display_contact').hide();
     });

     $('.services').mouseenter(function(){
         $('#display_services:hidden').fadeIn(400);
     }).mouseleave(function(){ 
         $('#display_services').hide();
     });

I've tried various methods by various programmers. I'm trying to hide/show multiple divs independently by mousing over the li class linked to each div by the mouseenter function but I'm new to jQuery and can't seem to find a solution. I know there has to be a cleaner way of doing this, I just haven't found one yet. Any help would be greatly appreciated!

example

Thanks

html:

<div id="right_nav">
    <div id='display_home'><img src="images/gallery/home.png" width="605" height="300" /></div>
    <div id='display_about'><img src="images/gallery/about us.png" width="605" height="300" /></div>
    <div id='display_contact'><img src="images/gallery/Contact Us.png" width="605" height="300" /></div>
    <div id='display_services'><img src="images/gallery/Servic开发者_StackOverflow社区es.png" width="605" height="300" /></div> 
  </div>
<div id="thumb">
      <ul>
        <li class="home"><img src="images/gallery/thumb/home.png" width="82" height="23" /></li>
        <li class="about"><img src="images/gallery/thumb/about us.png" width="130" height="24" /></li>
        <li class="contact"><img src="images/gallery/thumb/Contact Us.png" width="150" height="23" /></li>
        <li class="services"><img src="images/gallery/thumb/Services.png" width="113" height="24" /></li>
      </ul>
    </div>   

 $('.home, .about, .contact, ,services').hover(function(){
    $('#display_'+$(this).attr('class')+':hidden').fadeIn(400); 
 }, function() {
     $('#display_'+$(this).attr('class')).hide()
 }); 

EDIT

Perhaps it is even better to use the data attribute instead of the classname:

  <ul>
    <li class="home" data-name="home"><img src="images/gallery/thumb/home.png" width="82" height="23" /></li>
    <li class="about" data-name="about"><img src="images/gallery/thumb/about us.png" width="130" height="24" /></li>
    <li class="contact" data-name="contact"><img src="images/gallery/thumb/Contact Us.png" width="150" height="23" /></li>
    <li class="services" data-name="services"><img src="images/gallery/thumb/Services.png" width="113" height="24" /></li>
  </ul>

 $('#thumb li').hover(function(){
    $('#display_'+$(this).data('name')+':hidden').fadeIn(400); 
 }, function() {
     $('#display_'+$(this).data('name')).stop().hide();
 }); 

This way you can change the classes or add classes without breaking it.

$('div#thumb li').hover(function(){ // mouseover
    var className = $(this).attr('class');
    var divToShow = $('div#display_'+className);
    divToShow.fadeIn(400);
},
function(){ // mouseout
    // just hide all divs
    $('div#right_nav div').stop().hide();
});

So here, I've assumed that the class names of the lis directly relate the ids of the divs you want to hide/show.

The first function (mouseover) therefore gets the classname of the li you've moused over, it then adds it to the prefix div#display_ in order to build the id of the div you want to show, and then fades in that element.

The mouseout function just hides all the divs. The stop() stops the animation, if its part way through fading in.

Hope this helps.

$('#thumb ul li').mouseenter(function(){
        $('#right_nav div').eq($(this).index()).fadeIn(400); 
     }).mouseleave(function(){
         $('#right_nav div').hide()
     }); 

This is the simplest version supposing the content is in the same order, without a need to come back to your script and edit.