Jquery 元素悬停重叠元素

我试图用jQuery获得工具提示效果，但它并没有完全按照我希望的方式工作

$(".product").mouseover(function() {
    $(this).find(".description").fadeIn(300);
}).mouseleave(function() {
    $(this).find(".description").stop().fadeOut(300);
});

.product

是父元素，

.description

是子元素

这是我正在处理的页面。如果我将工具提示（

.description

）悬停，我需要它保持可见。我已经成功地实现了这一点，但是如果工具提示与另一个父元素的坐标重叠（

.product

毕竟触发了该函数），它就会消失

---

有人能把我推到正确的方向吗？我在这里读了很多关于stackoverflow的文章，但尽管有许多类似的问题，这些建议的解决方案似乎对我不起作用。任何善良的灵魂都能帮助JavaScript白痴吗？

尝试将工具提示中的

z-index

设置为

999999

：

<dd class="description" style="opacity: 1; display: block; z-index: 999999; ">
    Avocado op een bootje van rijst en zeewier
    <span class="social">FB | Twitter</span>
</dd>

鳄梨Opeen bootje van rijst en zeewier
FB |推特

---

确保

dd.description

的z索引高于这些图像

当鼠标进入

.description

时，我要做的是解除

mouseleave

功能的绑定，并在鼠标离开

.description

时重新绑定。尽管使用一个经过测试的工具提示插件（有很多）可能会更简单（而且故障更少）。

尝试在

dd.productWrap上设置
position:relative

您的
具有
显示：表格调用
。这可以防止
位置：relative
应用过多它
尝试
鼠标指针
而不是
鼠标指针
？@otakustay感谢您的建议，但是
mousenter
在此将失败，因为该函数将不应用于任何内部元素
位置：相对
用于
.product
此处，目的是保留
。说明
位置：绝对
参考
.product
。如果我没有指定，工具提示将显示在页面顶部，因此工作正常：）那么问题出在哪里？JS工作正常，但工具提示显示在页面顶部。我认为这就是问题所在，不是吗？它没有正确显示？工具提示应位于
.product
下，而不是页面顶部。在这里工作很好吗@caligulain FF 14.0.1当我将鼠标悬停在产品上（例如第8行）时，页面顶部会显示一个工具提示感谢您让我知道。我马上就要看一看，我也沿着那条路走，但我没能把头绕过去。但是，像CodefFormer建议的那样调整Z索引似乎是可行的。谢谢，你的建议行得通。我以前在
.description
上尝试过Z-index 500，但似乎不起作用，即使我将
.product
设置为100。知道为什么吗？如果我没弄错的话，浏览器会根据z索引堆叠每个元素，其余元素会在页面的最后以怎样的方式放置。因此，您必须有超过400个元素在页面上浮动，这可能会导致问题。为这些元素设置最高值总是好的。