懸停如何顯示內的絕對位置div來外面滾動的div

我有一個固定的寬度和高度div與overflow:auto屬性，根據本div我有一個表具有多個row和上一個td我顯示一個DIV（彈出 - 內容）onhover作者：fade-In的影響。但是當我徘徊在最後tddiv顯示，但在滾動區域下，並創造了太多的底部空白空間，我不想。懸停如何顯示內的絕對位置div來外面滾動的div

我想顯示可滾動區域外的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>

來源

2013-02-14 Sahil Sharma

小提琴將是有用的。 – 2013-02-14 07:46:17

你需要玩css..set位置爲絕對，並添加其他CSS來使其工作。 – 2013-02-14 07:53:55

試試下面的代碼

<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-14 07:59:41

不，我已經嘗試過這...實際上一切工作正常彈出內容div顯示，但我想，如果它顯示在最後一行然後它不應該佔用額外的空間在底部....我想展示出網格 - 內部分區 – 2013-02-14 09:01:26

我給那些可能有問題的人回答。

唯一的解決方案是用固定位置替換絕對位置。要小心，你必須設置相對於窗口的座標（如果你滾動，座標可能會改變）。

最簡單的方法是在懸停函數中使用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-17 11:27:56 Mickael

懸停如何顯示內的絕對位置div來外面滾動的div

回答

相關問題