Javascript 取消覆盖时使元素悬停，添加关闭按钮以便它记住cookies？

我试图制作一个工具提示，但我需要它保持悬停，当用户取消悬停

此外，我还试图在工具提示中添加一个关闭按钮，该按钮将保持“悬停状态”，当用户单击它时，我希望它能够记住cookies，这样它就不会为该cookie再次打开

我是javascript和jQuery的新手，几天来一直在思考这个问题

这是我的密码：

@charset“utf-8”；
/*由Deni创建的工具提示CSS*/
.工具提示容器{
宽度：400px；
高度：300px；
背景：#dbdb；
边框：1px纯黑；
利润率：10%自动；
}
/*启动工具提示css*/
.工具提示{
位置：相对位置；
z指数：9998；
光标：帮助；
}
.工具提示>范围{
显示：无；
}
。工具提示：悬停{
z指数：9999；
}
.工具提示：悬停.工具提示数据{
显示：块；
宽度：150px；
填充物：5px；
颜色：#达达达；
背景色：#A35FA1；
字体大小：11px；
边界半径：5px；
文字装饰：无；
字体系列：世纪哥特式；
位置：绝对位置；
底部：20px；
左：-10px；
文本对齐：居中；
}
.工具提示容器>a{
右边距：10px；
}
permhover先生{
显示：块；
不透明度：1；
}
**HTML:*

工具提示

一个可能的解决方案是在链接上注册onmouseout事件并显示工具提示。

一个可能的解决方案是在链接上注册onmouseout事件并显示工具提示。

首先，您需要将css中的所有行从“.tooltip:hover”更改为“.tooltip.hover”。 接下来，您需要将

添加到工具提示中（此按钮将关闭此工具提示）

然后，您需要添加jquery代码，当您将类悬停在工具提示上时，它会将类悬停添加到工具提示中

(function(){
    $('.tooltip').each(function(){
        var tooltip = $(this);
        var tooltipId = tooltip.attr('id');

        if( !getCookie(tooltipId) ) {
            tooltip.on('mouseenter.tooltip', function(){
                tooltip.addClass('hover');

                tooltip.find('.btn-close').on('click', function(){
                    var date = new Date();
                    date.setDate(date.getDate() + 1);

                    tooltip.removeClass('hover').off('mouseenter.tooltip');

                    document.cookie = tooltipId + "=true; path=/; expires=" + date.toUTCString();
                });
            });
        }
    });

    function getCookie(name) {
        var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }
})();

---

首先，您需要将css中的所有行从“.tooltip:hover”更改为“.tooltip.hover”。 接下来，您需要将

添加到工具提示中（此按钮将关闭此工具提示）

然后，您需要添加jquery代码，当您将类悬停在工具提示上时，它会将类悬停添加到工具提示中

(function(){
    $('.tooltip').each(function(){
        var tooltip = $(this);
        var tooltipId = tooltip.attr('id');

        if( !getCookie(tooltipId) ) {
            tooltip.on('mouseenter.tooltip', function(){
                tooltip.addClass('hover');

                tooltip.find('.btn-close').on('click', function(){
                    var date = new Date();
                    date.setDate(date.getDate() + 1);

                    tooltip.removeClass('hover').off('mouseenter.tooltip');

                    document.cookie = tooltipId + "=true; path=/; expires=" + date.toUTCString();
                });
            });
        }
    });

    function getCookie(name) {
        var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }
})();

---

您可以通过将

span

添加到

工具提示数据中来添加x

然后使用jQuery激活鼠标悬停上的工具提示，并通过单击x跨度将其删除


$（函数（）{
$（'.tooltip'）。在（'mouseover'，function（）上{
$（this.find（'span'）.show（）.append（“”）；
});
$（'.tooltip data span'）。在（'click'，function（）上{
$（this.parent（）.hide（）；
});
});
@charset“utf-8”；
/*由Deni创建的工具提示CSS*/
.工具提示容器{
宽度：400px；
高度：300px；
背景：#dbdb；
边框：1px纯黑；
利润率：10%自动；
}
/*启动工具提示css*/
.工具提示{
位置：相对位置；
z指数：9998；
光标：帮助；
}
.工具提示>范围{
显示：无；
}
。工具提示：悬停{
z指数：9999；
}
.工具提示数据{
显示：块；
宽度：150px；
填充物：5px；
颜色：#达达达；
背景色：#A35FA1；
字体大小：11px；
边界半径：5px；
文字装饰：无；
字体系列：世纪哥特式；
位置：绝对位置；
底部：20px；
左：-10px；
文本对齐：居中；
}
.工具提示数据范围{
浮动：对；
}
.工具提示容器>a{
右边距：10px；
}
permhover先生{
显示：块；
不透明度：1；
}
您可以通过在
工具提示数据中添加
span
来添加x
然后使用jQuery激活鼠标悬停上的工具提示，并通过单击x跨度将其删除


$（函数（）{
$（'.tooltip'）。在（'mouseover'，function（）上{
$（this.find（'span'）.show（）.append（“”）；
});
$（'.tooltip data span'）。在（'click'，function（）上{
$（this.parent（）.hide（）；
});
});
@charset“utf-8”；
/*由Deni创建的工具提示CSS*/
.工具提示容器{
宽度：400px；
高度：300px；
背景：#dbdb；
边框：1px纯黑；
利润率：10%自动；
}
/*启动工具提示css*/
.工具提示{
位置：相对位置；
z指数：9998；
光标：帮助；
}
.工具提示>范围{
显示：无；
}
。工具提示：悬停{
z指数：9999；
}
.工具提示数据{
显示：块；
宽度：150px；
填充物：5px；
颜色：#达达达；
背景色：#A35FA1；
字体大小：11px；
边界半径：5px；
文字装饰：无；
字体系列：世纪哥特式；
位置：绝对位置；
底部：20px；
左：-10px；
文本对齐：居中；
}
.工具提示数据范围{
浮动：对；
}
.工具提示容器>a{
右边距：10px；
}
permhover先生{
显示：块；
不透明度：1；
}

谢谢您的回答。我想在用户单击工具提示时使其不再显示，因此我认为最好的方法是使用cookies。我编辑了我的变体并添加了cookies参数。但是您需要为每个tooltipThanks添加一个ID属性来获得答案，当我尝试这段代码时，它不起作用。你能详细说明一下这个解决方案吗？你能用代码筛选你的代码编辑器吗？我会检查它的错误，我只是检查代码，一切正常。请确保已将id属性添加到每个工具脚本中。感谢您的回答。我想在用户单击工具提示时使其不再显示，因此我认为最好的方法是使用cookies。我编辑了我的变体并添加了cookies参数。但是您需要为每个tooltipThanks添加一个ID属性来获得答案，当我尝试这段代码时，它不起作用。你能详细说明一下这个解决方案吗？你能用代码筛选你的代码编辑器吗？我会检查它的错误，我只是检查代码，一切正常。请确保已将id属性添加到每个工具提示