将鼠标悬停在缩略图上的Google加弹出框？ [英] Google plus popup box when hovering over thumbnail?

问题描述

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

I'm trying to figure out how to create a popup box with user profile details on mouseover like you see on google plus. When hovering over a thumbnail a popup appears with the option to add that person into your circle.

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

It seems kinda simple to do with jQuery but I've been unable to find a simple solution. Most of the plugins I've come across are too complicated and require a lot of tweaking. Any help on how to do this would be greatly appreciated! Hover Effect Screenshot

推荐答案

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

You'll want to try something like this. It doesn't handle all the cases you'll need (you need the hover to stay active when user enters the popup); but you can work some of those out I hope.

这是基本的jQuery代码：

Here's the basic jQuery code:

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 on the popup for you (yeah, I'm still messing around with it; why?)

这篇关于将鼠标悬停在缩略图上的Google加弹出框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！