Question

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

<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元素的坐标范围内，有没有办法阻止这个动作？

Answer 1

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

Answer 2

你可以把图像放在一个div中，div可以托管ul和你的图像，并在div上使用鼠标悬停而不是图像，这样你就不会有这个问题

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

2 个答案: