使用Jquery将工具定位在悬停状态

在同一类中有n个div的页面中，我希望当光标悬停在某个元素上时，按钮相对于该元素出现。这段代码不起作用-现在，结果是当任何元素悬停时，隐藏的div和工具都会显示和隐藏，但它从不移动。当谷歌控制台在Chrome中执行时，我不会在其中出错

我有两个问题：

为什么我的立场声明不起作用

当光标指向工具时，保持工具不动的最佳方法是什么，因为这将在原始元素之外，因此将触发隐藏 此简化HTML如下所示，最后一个div在CSS中的位置为：绝对：

<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>

<div id="product-tool"></div>   

---

提前感谢您提供的任何帮助。

编辑：不，工具提示不起作用，因为您需要单击工具

我会根据下拉替换插件对其进行建模，例如：

您需要更改它，使其在悬停状态下而不是单击

---

此外，还有更好的下拉替换插件，这只是我发现的第一个。我环顾四周，选择一个好的工具进行修改

。产品工具可能应该是一个Id选择器，而不是一个class@mkoryak-同意-我更改了帖子以反映这一点。@mkoryak-感谢您的建议-我找到了一些工具提示实现，包括允许与提示交互的jQuery工具，以便它可以包含按钮。

function ProductToolHover() {
    $('.product').hover(function () {
        var product = $(this);
        $('#product-tool').position({of: product, my: 'left top', at: 'right center'});
        $('#product-tool').show();
    },
    function () {
        $('#product-tool').hide();
    })
}