如何将鼠标放在 div 下（使用 jQuery）？答案

【问题标题】：How to place a mouse under a div (with jQuery)?如何将鼠标放在 div 下（使用 jQuery）？
【发布时间】：2011-03-07 23:32:17
【问题描述】：

好的，让我解释一下。假设有一个小图像，当您将鼠标悬停在它上面时，将会有一个新的更大的图像（图像的放大版本）。这很容易，但请稍等！我希望较大的图像位于较小的图像之上，当您将鼠标悬停在较小的图像之外时，div 就会消失。问题是当您在较小的图像上显示较大的图像时，鼠标悬停在较大的图像而不是较小的图像上。我想让它使鼠标保持悬停在小图像上，同时将较大的图像放在顶部。当您将鼠标悬停在较小的图像之外时，较大的图像就会消失。关键是将较大的图像放在较小的图像之上（将其覆盖），但将鼠标放在较大的图像下方。想不通这个！谢谢大家

【问题讨论】：

如果有解决方案，则不要将光标放在大图像下方。光标始终在顶部。

标签： javascript jquery

【解决方案1】：

不，鼠标总是在上面。但是，您可以完成您想要的功能 - 当鼠标离开较小的图像时隐藏较大的图像。当然，有不止一种方法可以做到这一点。这是我要采取的方法。

HTML：

<div class="imgHover"></div>   <!-- This div is the element that is hovered -->
<img class="large" src="largerImg.jpg" />
<img class="small" src="smallerImg.jpg" />

CSS：

.small, .imgHover
{
    height: 55px;  /* Set the div's size to match the smaller image */
    width: 80px;
}
.imgHover, .large
{
    position: absolute;
}
.large
{
    display: none;
    z-index: 2;
}
.imgHover:hover + .large  /* this bit is the important part */
{
    display: block;
}
.imgHover
{
    z-index: 3;
}

如果您想使用 JavaScript 而不是纯 CSS，那没关系。使用相同的 css 设置它，但使用 div.imgHover 附加鼠标事件。

【讨论】：

这实际上是一个非常聪明的方法。我喜欢它，现在是时候尝试一下了。
我想做的事成功了！！！！！！！！！！！！！！！非常感谢你，也感谢所有贡献的人！！！！！！！亲爱的！！！！！！

【解决方案2】：

解决方案是在较大的图像上处理悬停，但在处理程序中，当指针的 x 和 y 位置离开较小图像的边界时，较大的图像会消失。

【讨论】：

这听起来像是一个计划，但代码看起来或多或少会是什么样子。我对编码有点陌生，不胜感激=D

【解决方案3】：

听起来你的问题是因为.hover() 因为你有新的 div 打开旧的，它导致.hover() 触发 mouseOut 功能。最好的解决方案是添加到.hover()，这样 mouseEnter 还包括从较小图像“生长”出来的较大图像。

类似

$("#small_image, #large_image").hover(function (){...},function() {...});

【讨论】：