I am trying to build this interface where I have some icons on the page. When user hovers mouse on one, it displays a corresponding section with some menu options (icons) - that I need to hide if user goes over another icon (and display this icons corresponding menu options.

The problem is - I also need to keep a section visible if mouse pointer is on it. But since I am using onmouseout, as soon as I try to move mouse and click on a menu option, it disappears.

Here's my code:

2.             <img id="imgHead1" src="images/abc.ico" alt="Info Center" />
3.    <div id="imgH1div1" style="width:300px; height:150px;margin: 100px 0 0 80px; " >
4.        <img id="imgH1image1" src="images/abc_img1.gif" alt="Create Event" />
5.    </div>
6.             ........
8. <script type="text/javascript">
9.         var parent1 = $('#imgHead1');
10.         var childs = $('div');
11.         childs.hide();
12.         parent1.hover(function(){
13.         parent1.next('div').animate({opacity: "show", top: "-75"}, "slow");
14.         },function(){
15.             parent1.siblings('div').animate({opacity: "hide", top: "-85"}, "slow"); 
16.         })
17. </script>

How can I achieve this? Thanks.