jquery - 创建悬浮卡/工具提示

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

这是我的代码。首先，我有一个空的div，其中的hov类将包含该信息。

<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)条件的原因）。当您将鼠标悬停在用户名上以及从php响应文件发送的信息时，我设法使HC出现；但是，无论我如何努力，我都会遇到两个无法解决的问题。

1）当我从链接中删除鼠标时，HC消失了，但是我悬停的链接也消失了（无论它是文本，图片，无论它是什么，它都消失了）。我尝试了mouseleave部分中的各种操作（检测div是否不清晰，删除或分离div，删除类，从hov中删除class属性等），但没有结果。这就是为什么我在那行$(".hov").hide();，这是迄今为止我能得到的最好的结果。我怀疑这与删除鼠标时完全删除hov类有关，我真的不能告诉。

2）我仅在将鼠标悬停在指向用户个人资料的链接上而不是某个随机链接上时，才不确定如何应用hov样式。我出于这个目的创建了ajax调用，以查看链接是否指向用户，但是我不确定是否以及如何使用相同的逻辑来解决此问题。

任何帮助将非常感激，

谢谢！

最佳答案

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

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

$(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>