[jQuery] problem handling mouseover event

[mcologne]

hi,

i have several images (more icons) on the page where i want to show a
div like a tooltip with more links on mouseover of these images.

the class of these images is .but_plus

i have a div before body for the tooltip

<div id="navover">here are more links</div>

.but_plus{
position:relative;
z-index:5;
}
#navover{
position:absolute;
display:none;
width:200px;
height:100px;
z-index:1;
background-color:#cccccc;
}

the z-index of the images is higher than the overlay, because the
image should be visible in the left top edge of the overlay even when
the overlay is visble.

my problem is in handling the mousover events

$(document).ready(function(){
                $(".but_plus").mouseover(function(){
                  $("#navover").hide();
                  var pos = $(this).offset();
                  var posleft = pos.left;
                  var postop = pos.top;
                  $("#navover").show();
                  $("#navover").css({'top' : postop, 'left' : posleft});
                  $("#navover").mouseout(function(){
                        $("#navover").hide();
                        });
                }).mouseout(function(){
                 //still empty at this time
                });
        });

anybody an idea how to handle the events in this case... my problem
actually is, that the overlay doesn't disappear when i shortly move
the mouse over the image and directly out (top or left direction)

if i attach an mouseover and out (or enter leave, hover) to the image,
i have no idea how to handle the display of the overlay... i don't
know if the user leavs the image eg. in the top direction or the
bottom direction... in the last case the overlay must be shown

best regards m
cologne