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

Question

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

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

Answer 1

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

这是基本的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(''); });
    });
});

更新:这是一个处理弹出窗口上的悬停事件的人(是的,我还在搞乱它;为什么？)