Question

我正在尝试为一个社交网络项目创建一个悬浮卡。这个想法是，当您将鼠标悬停在某个用户名上时，将出现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调用，以查看链接是否指向用户，但是我不确定是否以及如何使用相同的逻辑来解决此问题。

任何帮助将不胜感激，

谢谢！

Answer 1

当我从链接中删除鼠标时，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>

创建悬浮卡/工具提示

1 个答案: