Question

我正在尝试使用jQuery获得工具提示效果，但它并没有按照我想要的方式工作。

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

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

This是我正在处理的页面。如果我将其悬停，我需要工具提示（.description）才能保持可见状态。我已经成功地将其付诸实践，然而如果工具提示与另一个父元素的坐标重叠（.product会触发该函数），它就会消失。

有人能把我推向正确的方向吗？我在stackoverflow上已经阅读了很多内容，但是虽然有很多类似的问题，但这些建议的解决方案对我来说似乎并不适用。任何善良的灵魂都可以在这里帮助一个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-index高于这些图像。

Answer 2

我做的是当鼠标进入mouseleave时取消绑定.description功能，并在鼠标离开.description时重新绑定它。虽然使用经过测试的工具提示插件可能更简单（并且更少错误）（有很多）。

Answer 3

尝试在position:relative

上设置dd.productWrap

您的<dl>有display: table-call。这可以防止position:relative也适用

元素悬停重叠元素

3 个答案: