Check if cursor is in the co-ordinates of an element - jQuery

I have a large image which, when hovered shows a series of buttons (such as 'Share on Facebook', 'Gallery', 'Email', etc.). The buttons are stored as a ul and positioned absolutely when the image is hovered. Here's the markup for this:

<a href="#" title="Click for next image" class="share_buttons"> 
    <img src="" id="largeimage" height="410" width="600" class="share_buttons" /> 
</a> 
<ul id="share_buttons"> 
    <li><a href="#" title="Share on Facebook" class="facebook"><div class="icon"></div>Facebook</a></li> 
    <li><a href="#" title="Link to this Page" class="link"><div class="icon"></div>Link</a></li> 
    <li><a href="#" title="Contact this venue" class="mail"><div class="icon"></div>E-mail</a></li> 
    <li> 
        <a href="#" title="View the venue's Gallery" rel="lightbox" class="gallery"> 
            <div class="icon"></div> 
            Gallery
        </a> 
    </li> 
</ul> 

Here's the jQuery I put together for this. As you'll see, I included a variable to determine if the user's mouse is within the share buttons, and not to fade out it if is, but this doesn't seem to work:

var inshared = false;
$('ul#share_buttons li a').mouseover(function() { inshared = true; });
$('ul#share_buttons li a').mouseout(function() { inshared = false; });

// When they hover a share image, fade in the share items:
$('a.share_buttons img').mouseenter(function() {
    var leftpos = ($(this).width() + $(this).offset().left)  - $('ul#share_buttons').outerWidth(true);
    var toppos  = $(this).offset().top + ($('ul#share_buttons').outerHeight(true) * 0.3);
    $('ul#share_buttons').css({ left: leftpos, top: toppos });
        $('ul#share_buttons').fadeIn();
    }).mouseleave(function() {
        $('ul#share_buttons'开发者_StackOverflow社区).fadeOut(); 
    });

Unfortunately, since the ul is not a descendant of the image element, whenever the user places their mouse on the buttons, the mouseout event is fired on the image, and so the buttons are faded out. My question is, short of detecting if the cursors position is within the co-ordinates of the img element, is there a way to prevent this action?

You can put the image in a div and the div can host both the ul and your image and use mouseover on the div and not the image so you won't have this problem

I would create a div with the dimensions of the image, set the image as background-image, and place the ul inside this...

<div style="width: 600px; height: 410px; background-image: url(...); "> 
<ul id="share_buttons"> 
    <li><a href="#" title="Share on Facebook" class="facebook"><div class="icon"></div>Facebook</a></li> 
    <li><a href="#" title="Link to this Page" class="link"><div class="icon"></div>Link</a></li> 
    <li><a href="#" title="Contact this venue" class="mail"><div class="icon"></div>E-mail</a></li> 
    <li> 
        <a href="#" title="View the venue's Gallery" rel="lightbox" class="gallery"> 
            <div class="icon"></div> 
            Gallery
        </a> 
    </li> 
</ul>
</div>