将鼠标hover在缩略图上的Google加弹出框？

我正在试图找出如何在鼠标hover上创建一个包含用户个人资料详细信息的弹出框，就像你在google plus上看到的那样。 将鼠标hover在缩略图上时会出现一个弹出窗口，其中包含将该人添加到您的圈子中的选项。

使用jQuery似乎有点简单，但我一直无法找到一个简单的解决方案。 我遇到的大多数插件都太复杂了，需要进行大量的调整。 任何有关如何做到这一点的帮助将不胜感激！ hover效果截图

Answer 1

你会想尝试这样的事情 。 它不能处理您需要的所有情况（当用户进入弹出窗口时您需要hover以保持活动状态）; 但是你希望能够解决其中的一些问题。

这是基本的jQuery代码：

jQuery(function($) { function getMyContent($img) { // do your fancy ajax calls or append your control links and such here return $('
').append($img.clone()).append('Here is my fancy hoverbox'); } $('#content img').mouseenter(function(e) { var $this = $(this), off = $this.offset(); var pos = { // or you could position it relative to the mouse top: (e.clientY + 2) + 'px', left: (e.clientX + 2) + 'px' }; $('#hoverbox').css(pos) .append(getMyContent($this)) .fadeTo('slow', .95); }).mouseleave(function(e) { $('#hoverbox').fadeOut('slow', function() { $(this).html(''); }); }); }); 

更新： 这是一个处理弹出窗口上的hover事件的人（是的，我还在搞乱它;为什么？）

Answer 2

最简单的解决方案是在包含个人资料照片的元素中添加隐藏的div。

继续使用CSS为div设置样式，但是你希望它出现，比如右下角的绝对定位是为了“弹出”效果。 然后在jQuery中注册一个显示div的mouseOver事件：

 $().ready( function() { $('.profile-pic-wrapper').mouseenter( function() { $('.profile-popup', this).show( //pass in some animation options here ); }); $('.profile-pic-wrapper').mouseleave( function() { $('.profile-popup', this).hide( //pass in some animation options here ); }); }); 

这只是一个基本想法（并且该代码可能需要稍微调整一下）。 您必须添加一些额外的逻辑以在用户将鼠标置于其中时保持弹出窗口打开，但这应该让您开始。

更优雅的解决方案是将JSON数据传递给jQuery脚本并让它在hover时动态生成弹出div，但这有点高级。