Question

我正在处理的网站顶部有一组导航元素（“产品”，“公司”等）。将鼠标悬停在“产品”链接上时，会出现一个叠加层，其中显示了包含每个产品链接的产品列表。容器顶部有一个小链接，点击后会关闭容器。所有这些都与宣传的一样有效。

客户端要求，一旦用户的鼠标指针与覆盖元素足够距离，覆盖元素将关闭（无需他们点击“关闭”链接）。此元素出现在具有不同内容的多个页面上，因此我担心它不会像在页面中的另一个元素中添加mouseover侦听器并让它在任何地方都起作用那么简单。我想，我的问题是：是否有一种相对简单的方法可以知道鼠标光标距离此容器x个像素，并在发生这种情况时触发事件？

我的另一个想法是，我可以在页面上找到符合此条件的几个元素，并为每个元素添加mouseover个侦听器，但我假设有更优雅的方式来处理它。

提前致谢 - 如果需要更多细节，请告诉我。

Answer 1

这是一个例子。

http://jsfiddle.net/CsgFk/

计算叠加层周围的边界，并在mousemove上设置document hanlder，用于测试鼠标是否在边界之外。

编辑：隐藏叠加层时隐藏mousemove document可能是值得的，并在显示时重新绑定，以便mousemove不是无缘无故地开火。或者至少，让mousemove处理程序在隐藏之前检查叠加层是否已被隐藏。

HTML

<div id='overlay'></div>

CSS

#overlay {
    width: 200px;
    height: 200px;
    background: orange;
    position: relative;
    top: 123px;
    left:23px;
}

的jQuery

var $ovl = $('#overlay');
var offset = $ovl.offset();
var height = $ovl.height();
var width = $ovl.width();

var bounds = {top: offset.top - 100,
              bottom: offset.top + height + 100,
              left: offset.left - 100,
              right: offset.left + width + 100
             }

$ovl.mouseenter(function() {
    $ovl.stop().animate({opacity:1});
});

    $(document).mousemove(function(e) {
    if(e.pageX < bounds.left ||
       e.pageX > bounds.right ||
       e.pageY < bounds.top ||
       e.pageY > bounds.bottom) {
           $ovl.stop().animate({opacity:.3});
    }
});

修改

这是另一个想法（尽管它在很大程度上取决于你的布局）。将叠加层放置在具有大填充的容器内，并在指针在容器上执行mouseleave时移除叠加层。同样，这在您的布局中可能不可行。

修改

另一个想法是在用于删除叠加层的代码上设置延迟。它不那么精确，但可能产生足够理想的效果。

Answer 2

为什么不在计时器上使用mouseout事件？

var zGbl_OverlayCloseTimer      = '';

OverlayElement.addEventListener ("mouseout",  CloseOverlayWithDelay, false);


function CloseOverlayWithDelay (zEvent)
{
    if (typeof zGbl_OverlayCloseTimer == "number")
    {
        clearTimeout (zGbl_OverlayCloseTimer);
        zGbl_OverlayCloseTimer  = '';
    }

    zGbl_OverlayCloseTimer      = setTimeout (function() { CloseOverlay (); }, 333);
}


function CloseOverlay ()
{
    ...
}

如何智能地隐藏此叠加元素？

2 个答案: