创建悬停卡/工具提示
我正试图为一个社交网络项目创建一个悬停卡。这个想法是，当你悬停在某个用户的名字上时，会出现一个HC，其中包含一些关于该用户的更多信息。当你把鼠标移开时，它将在2秒后消失。
这是我的密码。首先，我有一个包含信息的hov类的空div。
<div class="hov">
</div>以下是我的jquery脚本：
$(function(){
$('body').on('mouseenter', 'a', function(){
let username = $(this).attr('href');
let quotesname = JSON.stringify(username);
let name = JSON.parse(quotesname)
// on the live site this span is populated by an Ajax call
data = "foo";
$(".hov").html("<span>" + data + "</span>");
$(this).focus().addClass('hov');
}).on('mouseleave', 'a', function(){
setTimeout(function(){
$(".hov").hide();
}, 2000);
});
});(上述所有内容都在头文件中，该文件包含在所有其他文件中)
最后，下面是CSS：
.hov {
position: relative;
}
.hov span {
display: none;
height: 150px;
width: 250px;
white-space: nowrap;
}
.hov:focus span {
display:block;
position:absolute;
padding: 0.2em 0.6em;
border:1px solid #996633;
border-radius: 5px;
background-color: grey !important;
color:#fff;
z-index: 100;
}我的想法是，当有人在链接上徘徊时，使用jquery进行检测。然后，它将提取href部件并将其发送到php响应文件，后者将检查href部件是否与数据库中的任何用户名匹配。如果是的话，它会发送HC中显示的关于那个用户的信息(如果一个链接包含一个用户名，它总是指向该用户的配置文件的链接)。如果没有，它将不会发送任何东西，然后就不会显示HC (这就是为什么我在ajax部分中使用了if(data)条件)。我设法使HC出现时，您悬停在用户名上，连同从php响应文件发送的信息；然而，我面临两个问题，我无法解决，无论我多么努力。
1)当我从链接中移除鼠标时，HC就消失了，但是我悬停在上面的链接也消失了(不管它是文本，还是picture..whatever，它已经消失了)。我尝试了mouseleave部件中的各种东西(检测div是否不在焦点，删除或分离div，删除类，从hov中删除类属性等等)，但是没有结果。这就是为什么我有这条线$(".hov").hide();在那里，这是我能做到的最好的。我怀疑当您将鼠标移开时，它会完全删除hov类，我真的不知道。
2)我不知道如何应用hov样式，只有当我悬停在指向用户配置文件的链接上，而不是一些随机链接时。为此，我创建了ajax调用，以查看链接是否指向用户，但我不确定是否以及如何使用相同的逻辑来解决这个问题。
任何帮助都是非常感谢的，
谢谢!
回答 1
Stack Overflow用户
发布于 2018-10-06 19:47:38
当我从链接中移除鼠标时，HC就消失了，但是我悬停在上面的链接也消失了。
您的事件侦听器正在寻找a元素上的鼠标。在该侦听器中运行以下代码：
$(this).focus().addClass('hov');它为a元素(this)提供了hov类。然后，在mouseleave代码中，您可以这样说：
$(".hov").hide();因此，您正在隐藏a元素。
我不知道如何应用hov样式，只有当我悬停在一个链接到用户的配置文件，而不是一些随机链接
在链接上使用一个不同的类，然后使用该类的样式。
尝试这样的方法(参见内联注释)：
$(function(){
// apply the event listener directly to the element
// note we've given the element a class
$('a.student')
.on('mouseenter', function(){
data = "foo";
// you have to show the tooltip element
$(".hov").html("<span>" + data + "</span>").show();
})
.on('mouseleave', function(){
setTimeout(function(){
// hide the tooltip element after a couple of seconds
$(".hov").hide();
}, 2000);
});
});.hov {
/* ensure this is hidden at startup */
display: none;
position: relative;
}
.hov span {
height: 150px;
width: 250px;
white-space: nowrap;
/* if the parent div is hidden, so is this, no need to set display property on it */
display:block;
position:absolute;
padding: 0.2em 0.6em;
border:1px solid #996633;
border-radius: 5px;
background-color: grey !important;
color:#fff;
z-index: 100;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hov">
</div>
<p>
<a class="student">A link!</a>
</p>
https://stackoverflow.com/questions/52682249
复制相似问题
腾讯云开发者
