当鼠标悬停在缩略图上时Google加弹出框？

Question

我想弄清楚如何创建一个弹出框与鼠标悬停的用户配置文件的细节，就像你看到谷歌加。当将鼠标悬停在缩略图上时，会出现一个弹出窗口，并将该人员添加到您的圈子中。

这似乎很容易与jQuery做，但我一直无法找到一个简单的解决方案。我遇到的大多数插件都太复杂，需要大量的调整。任何帮助如何做到这一点将不胜感激！ Hover Effect Screenshot

Answer 1

最简单的解决方案是将隐藏的div添加到包裹您的个人资料照片的元素。

<div class="profile-popup" style="display: none;"> 
    <!-- Popup info goes here --> 
</div> 

来吧，风格CSS股利但是你希望它出现，与对“弹出”效果右下角绝对定位说。然后注册在jQuery的mouseOver事件，显示DIV：

$().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脚本，并让它在悬停时动态生成弹出窗口div，但这有点高级。

Answer 2

你会想要try something like this。它不处理所有需要的情况（当用户进入弹出窗口时，需要悬停以保持活动状态）;但你可以在我希望的部分工作。

这里是基本的jQuery代码：

jQuery(function($) { 
    function getMyContent($img) { 
     // do your fancy ajax calls or append your control links and such here 
     return $('<p />').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(''); }); 
    }); 
}); 

UPDATE：Here is one that handles the hover events上弹出你（是的，我还在用它瞎搞;为什么？）