0

我有一个固定的宽度和高度div的overflow:auto属性，在这个下div我有一个有多个的表，在一个表row上td我通过效果显示一个div(pop-content) 。但是当我将鼠标悬停在最后时，正在显示但在滚动区域下方并在底部创建了太多我不想要的空白空间。onhoverfade-Intddiv

如果行是最后一个或倒数第二个，我想在可滚动区域之外显示 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 &amp; 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 &amp; 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 &amp; 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>
4

2 回答 2

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 中的任何地方替换它并尝试。

于 2013-02-14T07:59:41.070 回答
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);
            });
        });
    });
于 2013-05-17T11:27:56.703 回答