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元素的座標範圍內時，是否有辦法阻止此操作？