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:
- <img id="imgHead1" src="images/abc.ico" alt="Info Center" />
- <div id="imgH1div1" style="width:300px; height:150px;margin: 100px 0 0 80px; " >
- <img id="imgH1image1" src="images/abc_m1.gif" alt="Create Event" />
- </div>
I tried to use onmouseover/onmouseout events like:
- var childs = $('div');
- var parent1 = $('#imgHead1');
- childs.hide();
- parent1.onmouseover(function(){
- parent1.siblings('div').hide(); //hide all the divs
- parent1.next('div').show(); //get the next div when the mouse is over
- })
- parent1.onmouseout(function(){
- parent1.siblings('div').hide(); //hide all the divs
- })
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.