Question

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

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

Answer 1

你想要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(''); });
    });
});

更新：弹出的Here is one that handles the hover events（是的，我还在搞乱它;为什么？）

Answer 2

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

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

继续使用CSS设置div的样式，但是你希望它出现，比如右下角的绝对定位，＆＃34; pop out＆＃34;影响。然后在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脚本并让它在悬停时动态生成弹出div，但这有点高级。

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

2 个答案: