我的div属性具有固定的宽度和高度overflow:auto，在此div下我有一个包含多个row的表和一个td i我正在通过onhover效果显示一个 div（pop-content） fade-In。但是当我在最后td上徘徊时，div正在显示，但是在滚动区域下面并在底部创建了太多我不想要的空白区域。
如果行是最后一个或倒数第二个而不丢失scroll属性，我想在可滚动区域外显示div（pop-content）。下面是我的代码
jQuery的： -
$(function () {
$(".pop-outer").each(function () {
$(this).hover(function () {
$(this).find(".pop-content").stop(true, true).fadeIn(300);
}, function () {
$(this).find(".pop-content").stop(true, true).fadeOut(300);
});
});
});
HTML： -
<div class="grid-inner clearfix" style="overflow:auto; height:135px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="new-grid">
<tr>
<td class="even-color1" align="left" valign="middle">
<div class="pop-outer" style="position:relative">
<a href="#">Williams, Josh</a>
<div class="pop-content" style="display:none; position:absolute; right:5px; top:5px">
<span class="lft-arrow"></span>
<div class="pop-img-cont"><img src="Image/candidate1-large.jpg" alt="" /></div>
<div class="pop-description">
<h3>Josh Williams</h3>
<strong>Boston, MA</strong>
<h4>How Do You Define Success?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor ultricies odio ut placerat. Nam molestie consequat est, et sagittis nisl laoreet eu. Integer sodales, odio id malesuada commodo, neque ante faucibus turpis, ut porttitor risus libero sit amet leo.</p>
</div>
</div>
</div>
</td>
<td class="even-color2" align="left" valign="middle">New York</td>
<td class="even-color3" align="left" valign="middle">Goldman Sachs & Co</td>
<td class="even-color4" align="left" valign="middle">NYU</td>
<td class="even-color5" align="left" valign="middle">06/01/2012</td>
</tr>
<tr>
<td class="even-color1" align="left" valign="middle">
<div class="pop-outer" style="position:relative">
<a href="#">Williams, Josh</a>
<div class="pop-content" style="display:none; position:absolute; right:5px; top:5px">
<span class="lft-arrow"></span>
<div class="pop-img-cont"><img src="Image/candidate1-large.jpg" alt="" /></div>
<div class="pop-description">
<h3>Josh Williams</h3>
<strong>Boston, MA</strong>
<h4>How Do You Define Success?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor ultricies odio ut placerat. Nam molestie consequat est, et sagittis nisl laoreet eu. Integer sodales, odio id malesuada commodo, neque ante faucibus turpis, ut porttitor risus libero sit amet leo.</p>
</div>
</div>
</div>
</td>
<td class="even-color2" align="left" valign="middle">New York</td>
<td class="even-color3" align="left" valign="middle">Goldman Sachs & Co</td>
<td class="even-color4" align="left" valign="middle">NYU</td>
<td class="even-color5" align="left" valign="middle">06/01/2012</td>
</tr>
<tr>
<td class="even-color1" align="left" valign="middle">
<div class="pop-outer" style="position:relative">
<a href="#">Williams, Josh</a>
<div class="pop-content" style="display:none; position:absolute; right:5px; top:5px">
<span class="lft-arrow"></span>
<div class="pop-img-cont"><img src="Image/candidate1-large.jpg" alt="" /></div>
<div class="pop-description">
<h3>Josh Williams</h3>
<strong>Boston, MA</strong>
<h4>How Do You Define Success?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor ultricies odio ut placerat. Nam molestie consequat est, et sagittis nisl laoreet eu. Integer sodales, odio id malesuada commodo, neque ante faucibus turpis, ut porttitor risus libero sit amet leo.</p>
</div>
</div>
</div>
</td>
<td class="even-color2" align="left" valign="middle">New York</td>
<td class="even-color3" align="left" valign="middle">Goldman Sachs & Co</td>
<td class="even-color4" align="left" valign="middle">NYU</td>
<td class="even-color5" align="left" valign="middle">06/01/2012</td>
</tr>
</table>
</div>
答案 0 :(得分：0)
尝试以下代码
<div class="pop-content" style="display:none;background: #eee;border: 1px solid #ccc;padding: 10px;border-radius: 8px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);position: absolute;width: 200px;">在html中的任何地方替换它并尝试。
答案 1 :(得分：0)
我为可能遇到问题的人提供答案。
唯一的解决方案是用固定位置替换绝对位置。 小心，你必须设置相对于窗口的坐标（滚动时坐标可能会改变）。
最简单的方法是在悬停函数中使用jQuery设置左侧和顶部位置。 以下是一个示例：
$(function () {
$(".pop-outer").each(function () {
var $this = $(this);
$this.hover(function () {
var offset = $this.offset();
$this.find(".pop-content")
.stop(true, true)
.fadeIn(300)
.css({
'position': 'fixed',
'left': offset.left,
'top': offset.top
});
}, function () {
$this.find(".pop-content")
.stop(true, true)
.fadeOut(300);
});
});
});