當鼠標懸停在縮略圖上時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上彈出你（是的，我還在用它瞎搞;爲什麼？）