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

Question

我正在尝试为社交网络元素创建悬浮卡片。这个想法是，当您将鼠标悬停在某个用户的姓名上时，将出现一个 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 消失了，但我悬停的链接也消失了(无论是文本，图片..不管是什么，它都消失了)。我在 mouseleave 部分尝试了各种方法(检测 div 是否处于焦点、删除或分离 div、删除类、从 hov 中删除类属性> 等)，但没有结果。这就是为什么我有那行 $(".hov").hide(); ，这是迄今为止我能得到的最好的。我怀疑当您将鼠标移开时，它与完全删除 hov 类有关，我真的不知道。

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

任何帮助将不胜感激，

谢谢!

Answer 1

When I remove the mouse from the link, the HC disappears, but so does the link I hovered over

您的事件监听器正在 a 元素上寻找 mouseenter。在该监听器中运行此代码:

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

它为 a 元素 (this) 提供了 hov 类。然后，在 mouseleave 代码中，你这样说:

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

因此，您隐藏了 a 元素。

I'm not sure how to apply the hov styling only when I hover over a link to a user's profile, and not some random link

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

---

尝试这样的事情(见内联评论):

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