我该如何拥有类似Google+的悬停名片？

Question

我非常喜欢Google+的悬停卡片样式。当您将鼠标悬停在个人资料图片上时，它会弹出一个小框，类似于Stack Overflow上的“已建立用户”悬停卡片。

我知道如何做CSS，但需要帮助的是JavaScript。

我有一个代码，有点像这个：http://jsfiddle.net/NathanJohnson/AhVQN/ 但是，它的效果不太好。鼠标偏移量不正确。

能否有人帮我使其正常工作？先感谢您了。

- Nathan

---

你对它有什么不喜欢的地方吗？在我的电脑上（Mac上的Firefox浏览器），它似乎运行得相当不错。 - Landon

@Landon 光标距离太远了。我想让它更靠近一些，这样就更容易将光标放在框上而不会跑掉。而且更靠近光标看起来也更好看。 - Nathan

Answer 1

您可以在此部分更改鼠标偏移量：

  var pos = {
        // or you could position it relative to the mouse
        top: (e.clientY + 2) + 'px',
        left: (e.clientX + 2) + 'px'
    };

将 e.clientY + 2 改为 e.clientY + 1，这样悬浮卡就会更靠近鼠标指针了。

- banjomonster

---

我实际上找到了问题所在。这是由于填充导致的，因此当您悬停在边缘时，它会弹出，然后看起来不正确。现在好多了，同时我添加了更好的动画：http://jsfiddle.net/NathanJohnson/AhVQN/。感谢您的回答。 - Nathan

但是，我在想，如何使鼠标悬停时弹出的内容直接显示在鼠标旁边。就像在Google+上一样，它不仅会在你滑过的图像边缘弹出，而且会直接在鼠标旁边弹出。有没有用jQuery实现这个功能的方法？ - Nathan

你尝试过设置 top: e.clientY + 'px, left: e.clientX + 'px' 吗？这将使其出现在光标旁边。您可能希望缩短 show 时间，以便它更快地出现 - 如果您在触发鼠标悬停后继续移动它，这将有助于它靠近光标显示。 - banjomonster

是啊，我想知道谷歌是如何做到的。嗯，他们是谷歌，而且让人很难找到他们的JavaScript。（也许在Google+上不是这样，但在Gmail上是这样的）我希望它能更靠近鼠标，而不是在边缘。我增加了时间，但它仍然这样做。也许有一种不同的方法？.hover()会起到同样的作用吗？ - Nathan

其实我突然想到一个问题...有没有办法让它直接弹出在图片旁边？就像我的Get Satisfaction个人资料，将鼠标悬停在我的个人资料图片上即可查看。这样会更容易一些。当我得到那段代码时，它确实包含了$(this).offset()（类似于这样的内容），但我不知道如何使用它。 - Nathan