title: How to use arrays in javascript to match up divs when event fires?
body: <p>I have a set of two divs - First set: when people mouse over these divs, it will fire an event, Second set: when the event is fired, these divs will be displayed. 
  When you mouse over a div in the first set, it should display its corresponding div in the second set. I thought an easy way to match the mouseover divs with the correct div to display would be using arrays. I've been able attach the event listeners properly, but I can't figure out how to set it up so that when you mouseover one object of an array, it displays the array object with the same index number. I think if I could figure out how to recoginze the index number of the object I am mousing over, I could get it to work. I've tried a lot of things, but haven't been able to create anything that works. Here's the code: </p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
  
  
  //create array of divs to mouse over 
  var ar = new Array();
  ar[0] = $("#home"); 
  ar[1] = $("#doc");
  
  var length = ar.length;
  
  //create array of divs to display when event is fired 
  var des = new Array();
  des[0] = $("#homeDes");
  des[1] = $("#docDes");
  
  
  // start for
  for ( var i = 0; i&lt; length; ++i )
  {
  ar[i].bind("mouseover",function(){$(des[i]).css("display","block");});
  ar[i].bind("mouseout",function(){$(des[i]).css("display","none");});
  } 
  //end for
  
  }); 
  //end 
  
  &lt;/script&gt;
  </code></pre>