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

Posted 2023-05-08

【中文标题】检查光标是不是在元素的坐标中 - jQuery

【英文标题】：Check if cursor is in the co-ordinates of an element - jQuery检查光标是否在元素的坐标中 - jQuery

【发布时间】：2011-09-03 08:20:01

【问题描述】：

我有一张大图，悬停时会显示一系列按钮（例如“在 Facebook 上分享”、“图库”、“电子邮件”等）。这些按钮存储为ul，并在图像悬停时绝对定位。这是这个的标记：

<a href="#" title="Click for next image" class="share_buttons"> 
    <img src="" id="largeimage"   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> 

这是我为此编写的 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(); 
    );

不幸的是，由于ul 不是图像元素的后代，因此每当用户将鼠标放在按钮上时，都会在图像上触发mouseout 事件，因此按钮会淡出。我的问题是，如果没有检测光标位置是否在 img 元素的坐标内，有没有办法阻止这种行为？

【参考方案1】：

您可以将图像放在一个 div 中，该 div 可以同时托管 ul 和您的图像，并在 div 而不是图像上使用鼠标悬停，这样您就不会遇到这个问题

【参考方案2】：

我会创建一个具有图像尺寸的 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>