0

私はプロパティで幅と高さを固定divしています。この下には複数のテーブルがあり、 1 つのテーブルには 1つのdiv(pop-content)が効果的に表示されています。しかし、最後にカーソルを合わせると表示されますが、スクロール領域の下に表示され、下部に不要な空白スペースが作成されます。overflow:autodivrowtd onhoverfade-Intddiv

行が最後または最後から 2 番目の場合、スクロール プロパティを失うことなく、スクロール可能な領域の外側に 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 に答える