单元悬停重叠单元

Question

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

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

.product是父元素，.description是子元素。

这是我正在研究的页面。如果我将工具提示(.description)悬停，我需要它保持可见。我已经成功地让它工作了，但是，但是，如果工具提示与另一个父元素的坐标重叠(毕竟.product触发了函数)，它就消失了。

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

Answer 1

尝试将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>

确保dd.description的z索引高于这些图像.

Answer 2

我要做的是在鼠标进入.description时解除绑定.description函数，并在鼠标离开.description时重新绑定它。尽管仅仅使用一个经过测试的工具提示插件可能更简单(而且更少be )(有很多)。

Answer 3

尝试在position:relative上设置dd.productWrap

你的<dl>有display: table-call。这就阻止了position:relative也应用它。