Question

我正在开发一个使用jQuery的小型网络应用程序。在我的应用程序中，用户可以将图像悬停在几秒钟后变大，为他提供更多详细信息。

问题是当图像放大图像时，它也会占据附近图像的区域。现在，如果用户越过第二个红色方块（编号为2），我希望当前放大的图像消失，而是将下图所示的图像放大为方形二。

我不是一个画家，但我附上了一张小图片来帮助说明问题。

简而言之，我怎样才能告诉jQuery何时检测到鼠标位于红色方块的第二位，如果鼠标位于绿色方块上则不会引发事件。

[在我的演示图片中，悬停在点上]

Hovered menu sample http://i46.tinypic.com/3y1x5.png

Answer 1

我首先要问几个问题。

箱子“1”也是绿箱吗？
您是否使用z-index将1放在2？

如果是这样，这是你的修复。

$(document).ready(function(){
    $('.box').mouseover(function(){
        $(this).css('width', '300');
    });
    $('.box').mouseout(function(){
        $(this).css('width', '200');
    });
});

Box是一个适用于所有4个盒子的类，它将悬停的盒子加宽到300px，然后在被关闭时将其缩小到200px。

无论如何，您需要详细说明正在使用的过程。你能发一些代码吗？

Answer 2

您尚未发布任何代码，但......

您可以创建一些与其各自红色方块具有相同尺寸的空div标签，并让它们位于红色方块的顶部，位置为：绝对值和高z-index值，并且鼠标悬停功能附加到这些空div那会缩小绿色广场。

当绿色方块被放大时，你可以只显示空div（虽然它们会被用户隐藏），否则就会隐藏。

jQuery图像悬停菜单图片重叠附近的图片

2 个答案: