Tumblr样式的UserHoverCard

Tumblr样式的UserHoverCard

本质上，我已经创建了一个非常聪明的解决方法。这是一个覆盖图像的遮罩（不可见），直到加载html，然后将z-index降低后才进行悬浮css。鼠标悬停在容器上。

小提琴

.summary {    margin: -50px auto 0;    width: 50px;    height: 50px;    position: relative;    z-index: 0;}.summary-mask {    margin: 50px auto 0;    width: 50px;    height: 50px;    position: relative;    z-index: 1;}.loaded .summary-mask {    z-index: -1;}

HTML

<div >    <div ></div>    <div  data-id="100"> <a href="http://kraigo.tumblr.com/" ></a>        <div ></div>    </div></div>

JS

var response = '<div > <div ></div> <div > <a href="http://kraigo.tumblr.com/" >Follow</a> <p > <a href="http://kraigo.tumblr.com/">Page Name</a> </p> </div> <div ></div> <div > <h1 >Username</h1> <p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy ..</p> </div> <ul > <li></li> <li></li> <li></li> </ul> </div>';$(document).ready(function () {    function showProfileTooltip(e, id) {        //send id & get info from get_profile.php         $.ajax({ url: '/echo/html/', data: {     html: response,     delay: 0 }, method: 'post', success: function (returnHtml) {     e.find('.user-container').html(returnHtml).promise().done(function () {         $('.the-container').addClass('loaded');     }); }        });    }    function hideProfileTooltip() {        $('.the-container').removeClass('loaded');    }    $('.the-container').hover(function (e) {        var id = $(this).find('.summary').attr('data-id');        showProfileTooltip($(this), id);    }, function () {        hideProfileTooltip();    });});