jQuery图像悬停菜单图片与附近图片重叠答案

【问题标题】：jQuery image hover menu picture overlaps nearby picturesjQuery图像悬停菜单图片与附近图片重叠
【发布时间】：2010-05-28 00:25:14
【问题描述】：

我正在开发一个使用 jQuery 的小型 Web 应用程序。在我的应用中，用户可以悬停一张图片，几秒钟后图片会变大，为他提供更多细节。

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

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

简而言之，我如何告诉 jQuery 检测鼠标何时在红色方块 2 上，但如果鼠标在绿色方块上则不引发事件。

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

【问题讨论】：

标签： jquery

【解决方案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 个框的类，它将悬停的框扩大到 300 像素，然后在鼠标关闭时将其缩小到 200 像素。

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

【讨论】：

【解决方案2】：

您还没有发布任何代码，但是...

您可以创建一些与它们各自的红色方块尺寸相同的空 div 标签，并让它们以 position:absolute 和高 z-index 值放置在它们的红色方块上，并在这些空 div 上附加鼠标悬停功能这会缩小绿色方块。

您可以让空的 div 仅在绿色方块放大时显示（尽管它们会对用户隐藏），否则隐藏。

【讨论】：