本质上，我已经创建了一个非常聪明的解决方法。这是一个覆盖图像的遮罩（不可见），直到加载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(); });});
