检查光标是否在元素jQuery的坐标中

问题描述

|| 我有一张大图片，将鼠标悬停时会显示一系列按钮（例如\'在Facebook上共享\'，\'画廊\'，\'电子邮件\'等）。这些按钮存储为“ 0”，并在图像悬停时绝对定位。这是此标记：

<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> 
@H_502_2@

这是我为此编写的jQuery。如您所见，我包含了一个变量来确定用户的鼠标是否在共享按钮内，如果是，则不淡出它，但这似乎不起作用：

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\').fadeOut(); 
    });
@H_502_2@

不幸的是，由于ѭ0不是图像元素的后代，因此每当用户将鼠标置于按钮上时，图像上就会触发
mouSEOut@H_502_2@事件，因此按钮会淡出。我的问题是，缺少检测光标位置是否在
img@H_502_2@元素的坐标内，是否有办法防止此操作？
    


解决方法
        您可以将图像放在div中，并且div可以同时托管ul和图像，并在div而不是图像上使用mouseover，这样就不会出现此问题
    ,        我将使用图像的尺寸创建一个div，将图像设置为背景图像，并将ul放置在该图像中...

<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>