making onmouseover / onmouseout work

making onmouseover / onmouseout work

I am trying to build my first interface using jQuery.

I will have some icons on the page. When user hovers the mouse on an image, it should display a list of menu options (some more icons). Like:
  1. <img id="imgHead1" src="images/abc.ico" alt="Info Center" />
  2. <div id="imgH1div1" style="width:300px; height:150px;margin: 100px 0 0 80px; " >
  3.  <img id="imgH1image1" src="images/abc_m1.gif" alt="Create Event" />
  4. </div>
I tried to use onmouseover/onmouseout events like:
  1. var childs = $('div');
  2. var parent1 = $('#imgHead1');
  3. childs.hide();
  4. parent1.onmouseover(function(){
  5.        parent1.siblings('div').hide(); //hide all the divs
  6.        parent1.next('div').show(); //get the next div when the mouse is over
  7. })
  8. parent1.onmouseout(function(){
  9.        parent1.siblings('div').hide(); //hide all the divs
  10. })
It doesn't work. If I use hover instead of onmouseover, it works partially - because onmouseout still doesn't work.
Any idea how I can make them work?
Thanks.