Question

我需要设置一个悬停按钮，可以在悬停时显示弹出图像，并在悬停时删除弹出图像。我的问题是，当我将鼠标悬停在按钮上时，弹出图像会弹出并覆盖按钮，因此即使光标仍在按钮上，它也会触发hoverout事件并删除弹出图像。我该如何解决这个问题？

 $('.test').hover(function(){           
            imageId=$(this).next().attr('id');
            $('#div-' + imageId).show(150);
        },function (){
            $('#div-' + imageId).hide(150);
        })

Answer 1

我认为弹出图像并不完全覆盖缩略图（或者这将是微不足道的：只需在弹出图像上激活鼠标事件）。然后这是气泡和菜单的常见问题。如果弹出窗口包含其他鼠标悬停敏感区域，则会出现类似问题。

您可以在拇指和弹出窗口中注册mouseleave事件，并在收到事件时检查鼠标是否仍然在目标上。

您可以使用此功能：

// event is an event (usually the mouseleave)
// o is a jquery object
bubbling.eventIsOver = function(event, o) {
    if ((!o) || o==null) return false;
    var pos = o.offset();
    var ex = event.pageX;
    var ey = event.pageY;
    if (
        ex>=pos.left
        && ex<=pos.left+o.width()
        && ey>=pos.top
        && ey<=pos.top+o.height()
    ) {
        return true;
    }
    return false;
};

如果返回true，鼠标仍然悬停在弹出图像或缩略图上，因此不应关闭弹出窗口。

Answer 2

正如Skarky672在他的评论中所说的那样，你可以设置mouseleave函数在图像本身mouseleave上调用的路径，因为你已经在变量中设置了图像id在此之前它会很简单。

您的代码看起来像这样。

//When hovering over the button the image pops up.
$('.test').bind('mouseenter',function(){           
            imageId=$(this).next().attr('id');
            $('#div-' + imageId).show(150);
        });
//When the mouse leaves that same image that came up, it closes the image.
$('#div-' + imageId).bind('mouseleave',function (){
            $(this).hide(150);
        });

或者，您可以简单地从按钮偏移弹出图像，这样按钮就永远不会被覆盖。

Answer 3

我认为问题不在于您的JavaScript，而在于您的CSS。考虑在CSS中设置padding和margin，并确保它不会隐藏按钮。如果将图片设置为显示在overflow: hidden等元素中，也可以对元素使用<div>。

希望这有帮助。

如何解决这个重叠的悬停问题

3 个答案: