0

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

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

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

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

任何人都可以将我推向正确的方向吗？我在 stackoverflow 上阅读了很多内容，但尽管有很多类似的问题，但这些建议的解决方案似乎对我不起作用。任何善良的灵魂都可以在这里帮助一个 JavaScript 白痴吗？

4

3 回答 3

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>

确保 z-indexdd.description高于这些图像。

于 2012-07-25T06:34:58.110 回答
0

尝试position:relative设置dd.productWrap

你<dl>有display: table-call。这可以防止position:relative应用它

于 2012-07-25T06:38:23.817 回答
0

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

于 2012-07-25T06:35:48.763 回答