1
我有一个大图像，当它徘徊时显示一系列按钮（如'在Facebook上共享'，'图库'，'电子邮件'等）。按钮存储为ul，并且在图像悬停时绝对放置。这里的标记为：检查光标是否在元素的坐标 - jQuery
<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>
这里是我为此放在一起的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元素的坐标范围内时，是否有办法阻止此操作？