如何修复弹出窗口上的jquery

这是我试图修复的图像，当我在第一个共享图标上悬停时，弹出菜单也在其他共享实例上显示，我如何防止这种情况

下面是基于

---

我建议您将对悬停元素的引用传递给show\u工具提示函数。然后，在该元素中选择要显示或添加类的元素

类似这样的悬停：

然后类似于show_工具提示的内容：

请在中找到两个示例。第一个元素与您的元素类似，如果您仅将鼠标悬停在其中一个元素上，则所有元素都会打开或关闭。第二个示例使用jQuerythis引用鼠标悬停的对象

如果您能够包含相关的HTML，我可能能够更具体地了解您的代码

编辑： 谢谢你的邀请

下面是代码的修改部分。请注意，$hovered对象被传递到show_工具提示，以便它知道哪个框处于活动状态

关闭框的超时基于活动元素的DOM索引设置，并单独存储在数组中。通过这种方式，两个超时功能相互独立

var t=[];
var autohide = true;

jQuery('.toolbar-social').hover(function () {
    var $hovered=jQuery(this);
    clearTimeout(t[$hovered.index()]);
    TNWSC.show_tooltip(true, $hovered);
    autohide = true;
}, function () {
    if (autohide === true) {
       var $hovered=jQuery(this);
       t[$hovered.index()] = setTimeout(function() {TNWSC.show_tooltip(false,$hovered)}, 800);
    }
});

我更改了靠近类而不是ID的工具提示，因为我们希望页面上有多个工具提示：

jQuery('.tooltip-close').click(function () {
    var $hovered=jQuery(this).closest('.toolbar-social');
    clearTimeout(t[$hovered.index()]);
    TNWSC.show_tooltip(false,$hovered);
    autohide = true;
});

这里是show_工具提示函数，再次使用$hovered对象修改活动框的唯一子元素

show_tooltip: function (show, $hovered) {
    if (show) {
        jQuery('.icon-share',$hovered).addClass('active');
        jQuery('.tooltip-wrapper',$hovered).show();
    } else {
        jQuery('.icon-share',$hovered).removeClass('active');
        jQuery('.tooltip-wrapper',$hovered).hide();
    }
},

---

这里有一个。

这是wordpress的a插件，我认为它只适用于单个页面，但当我把它放在主页上时，出现了一个错误，当我悬停它时，弹出所有共享按钮，该代码包含PHP，在JSFIDLE上无法运行。如果可能的话，请使用呈现的HTML代码而不是PHP源代码。这里是更新的代码，如果它很混乱的话很抱歉哇！非常感谢我还将800更新为100，因为移除盒子的速度很慢：非常感谢您的帮助，非常感谢您的解释

var t=[];
var autohide = true;

jQuery('.toolbar-social').hover(function () {
    var $hovered=jQuery(this);
    clearTimeout(t[$hovered.index()]);
    TNWSC.show_tooltip(true, $hovered);
    autohide = true;
}, function () {
    if (autohide === true) {
       var $hovered=jQuery(this);
       t[$hovered.index()] = setTimeout(function() {TNWSC.show_tooltip(false,$hovered)}, 800);
    }
});

jQuery('.tooltip-close').click(function () {
    var $hovered=jQuery(this).closest('.toolbar-social');
    clearTimeout(t[$hovered.index()]);
    TNWSC.show_tooltip(false,$hovered);
    autohide = true;
});

show_tooltip: function (show, $hovered) {
    if (show) {
        jQuery('.icon-share',$hovered).addClass('active');
        jQuery('.tooltip-wrapper',$hovered).show();
    } else {
        jQuery('.icon-share',$hovered).removeClass('active');
        jQuery('.tooltip-wrapper',$hovered).hide();
    }
},