Jquery 创建悬停卡/工具提示

我正在尝试为一个社交网络项目创建一个悬停卡。其思想是，当您将鼠标悬停在某个用户名上时，会出现一个HC，其中包含有关该用户的更多信息。当你将鼠标移开时，它将在2秒钟后消失

这是我的密码。首先，我有一个空div，其类为

hov

，将包含信息

<div class="hov">

</div>

我的想法是在有人悬停在链接上时使用jquery进行检测。然后它将提取

href

部分并将其发送到php响应文件，该文件将检查

href

部分是否与数据库中的任何用户名匹配。如果是，它将发送有关该用户的信息，该信息将显示在HC中（如果链接包含用户名，则始终是指向该用户配置文件的链接）。如果没有，它将不发送任何内容，然后不会显示HC（这就是为什么我在ajax部分中使用

If（data）

条件）。当您将鼠标悬停在用户名上时，我设法使HC显示，同时显示从php响应文件发送的信息；然而，无论我怎么努力，我都面临着两个无法解决的问题

1） 当我从链接中移除鼠标时，HC消失了，但我悬停的链接也消失了（不管它是文本还是图片……不管它是什么，它都消失了）。我在

mouseleave

部分尝试了各种方法（检测div是否不在焦点，移除或分离div，移除类，从

hov

中移除class属性等），但没有结果。这就是为什么我有那行

$（“.hov”）.hide（）在那里，这是到目前为止我能得到的最好的了。我怀疑当你将鼠标移开时，它与完全删除
hov
类有关，我真的不知道

2） 我不知道如何应用
hov
样式，仅当我将鼠标悬停在指向用户配置文件的链接上，而不是某个随机链接上时。我创建ajax调用就是为了这个目的，看看链接是否指向用户，但我不确定是否以及如何使用相同的逻辑来解决这个问题

任何帮助都将不胜感激

谢谢

当我从链接中移除鼠标时，HC消失，但我悬停的链接也消失了

您的事件侦听器正在
元素上查找mouseenter。在该侦听器中运行以下代码：

$(this).focus().addClass('hov');

这为
a
元素（
this
）提供了
hov
类。然后，在mouseleave代码中，您可以这样说：

$(".hov").hide();

因此，您隐藏了
a
元素

我不确定只有当我将鼠标悬停在指向用户配置文件的链接上，而不是某个随机链接上时，如何应用hov样式

在链接上使用不同的类，然后设置该类的样式


尝试类似的方法（请参见注释内联）：


$（函数（）{
//将事件侦听器直接应用于元素
//注意，我们给元素一个类
$（“a.student”）
.on（'mouseenter'，function（）{
data=“foo”；
//您必须显示工具提示元素
$（“.hov”）.html（“+data+”）.show（）；
})
.on（'mouseleave'，function（）{
setTimeout（函数（）{
//几秒钟后隐藏工具提示元素
$（“.hov”）.hide（）；
}, 2000);                           
});
});
.hov{
/*确保在启动时将其隐藏*/
显示：无；
位置：相对位置；
}
.霍夫斯潘{
高度：150像素；
宽度：250px；
空白：nowrap；
/*如果父div是隐藏的，则不需要对其设置display属性*/
显示：块；
位置：绝对位置；
填充：0.2em 0.6em；
边框：1px实心#996633；
边界半径：5px；
背景色：灰色！重要；
颜色：#fff；
z指数：100；
}


链接！
你能从中摆脱PHP吗？这看起来像是一个严格的JavaScript/CSS问题。@miken32好的，会在事件代码中这样做，只要让它创建带有固定文本的
。这将允许其他人更容易地重新创建代码。查看有关的详细信息。抱歉。一直很忙，完全忘了这件事。是的，你的回答把我引向了正确的方向。我终于创造了我想要的。谢谢，米肯。
$(this).focus().addClass('hov');

$(".hov").hide();