Multiple hover functions

Multiple hover functions

I have 4 div and I want only one div to show at a time, that div being the one that the last div has just hovered over. The only problem is only one of the div boxes is reacting:

  $(document).ready(function(){
   $("#items1").hide();
   $("#items2").hide();
   $("#items3").hide();
   $("#items4").show();


    $("#headText1").hover(
      function () {
      $("#items1").show();
      $("#items2").hide();
      $("#items3").hide();
      $("#items4").hide();

          
      }
    );

   $(document).ready(function(){
      $("#headText2").hover(
        function () {
         $("#items2").show();   
         $("#items1").hide();
         $("#items3").hide();
         $("#items4").hide();       
        }
      );
     });




    $("#headText3").hover(
      function () {
     $("#items3").show();
      $("#items2").hide();
      $("#items1").hide();
      $("#items4").hide();
          
      }
    );
    $("#headText4").hover(
      function () {
      $("#items4").show();
      $("#items2").hide();
      $("#items3").hide();
      $("#items1").hide();
       
      }
    );

  });


Only the
$("#headText1").hover(
part works.

but if i was the function to be in another order, then the top one works wheather the top one id headText1 or 4

Anybody see my problem?[/code]