-1

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

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

3 回答 3

2

我想弹出图像并没有完全覆盖缩略图（或者这将是微不足道的：只需在弹出图像上触发 mouselave 事件）。然后这是气泡和菜单的常见问题。如果弹出窗口包含其他鼠标悬停敏感区域，您也会遇到类似的问题。

您可以在拇指和弹出窗口上注册 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，则鼠标仍悬停在弹出图像或缩略图上，因此不应关闭弹出窗口。

于 2012-08-19T06:31:17.400 回答
1

正如 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);
        });

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

于 2012-08-19T06:33:04.890 回答
0

我认为问题不在于您的 JavaScript，而在于您的 CSS。考虑在你的 CSS 中设置padding和margin确保它不会隐藏按钮。如果图像设置overflow: hidden为出现在某些元素（如<div>.

希望这可以帮助。

于 2012-08-19T06:37:32.310 回答