將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(''); });
    });
});

更新： 這是一個為您處理彈出窗口上的懸停事件的工具（是的，我仍然在弄亂它；為什么？）

Answer 2

最簡單的解決方案是將隱藏的div添加到環繞您的個人資料照片的元素中。

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

繼續並使用CSS設置div的樣式，但是要在CSS的底部顯示絕對樣式，例如“彈出”效果。 然后在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，但這要高級一些。