如何在不移動其他元素的情況下放大div

如何阻止此div將以下所有元素移動到您選擇特定價格的位置？如何在不移動其他元素的情況下放大div

要看看我說的，請看看這個鏈接：Check the price table style 3 下面，你可以看到，當你選擇某一價格表下面的所有元素都因爲彈出的移動。我希望能夠使用此功能，但當然不會移動下面的所有元素。

我該怎麼做？

這裏是鏈接到一個Javascript：JS

編輯：

我張貼有關HTML：

<!-- DC Pricing Tables:3 Start --> 
    <div class="tsc_pricingtable03 tsc_pt3_style1"> 
    <div class="caption_column"> 
     <ul> 
     <li class="header_row_1 align_center radius5_topleft"></li> 
     <li class="header_row_2"> 
      <h2 class="caption">Choose plan</h2> 
     </li> 
     <li class="row_style_4"><span>Web Space</span></li> 
     <li class="row_style_2"><span>Bandwidth</span></li> 
     <li class="row_style_4"><span>E-mail accounts</span></li> 
     <li class="row_style_2"><span>MySQL databases</span></li> 
     <li class="row_style_4"><span><a href="#" class="tooltip" rel="Web-based control panel system">CPANEL</a></span></li> 
     <li class="row_style_2"><span><a href="#" class="tooltip" rel="24/7 Support via Phone, Email, Web.">24/7 Support</a></span></li> 
     <li class="footer_row"></li> 
     </ul> 
    </div> 
    <div class="column_1"> 
     <ul> 
     <li class="header_row_1 align_center"> 
      <h2 class="col1">starter</h2> 
     </li> 
     <li class="header_row_2 align_center"> 
      <h1 class="col1">$<span>5</span></h1> 
      <h3 class="col1">per month</h3> 
     </li> 
     <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">10GB</a></span></li> 
     <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">100GB</a></span></li> 
     <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">1</a></span></li> 
     <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">1</a></span></li> 
     <li class="row_style_3 align_center"><span class="pricing_no"></span></li> 
     <li class="row_style_1 align_center"><span class="pricing_yes"></span></li> 
     <li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li> 
     </ul> 
    </div> 
    <div class="column_2"> 
     <ul> 
     <li class="header_row_1 align_center"> 
      <h2 class="col2">basic</h2> 
     </li> 
     <li class="header_row_2 align_center"> 
      <h1 class="col2">$<span>10</span></h1> 
      <h3 class="col2">per month</h3> 
     </li> 
     <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">30GB</a></span></li> 
     <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">200GB</a></span></li> 
     <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">10</a></span></li> 
     <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">10</a></span></li> 
     <li class="row_style_4 align_center"><span class="pricing_yes"></span></li> 
     <li class="row_style_2 align_center"><span class="pricing_yes"></span></li> 
     <li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li> 
     </ul> 
    </div> 
    <div class="column_3"> 
     <ul> 
     <li class="header_row_1 align_center"> 
      <h2 class="col3">pro</h2> 
     </li> 
     <li class="header_row_2 align_center"> 
      <h1 class="col3">$<span>29</span></h1> 
      <h3 class="col3">per month</h3> 
     </li> 
     <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">100GB</a></span></li> 
     <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">500GB</a></span></li> 
     <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">50</a></span></li> 
     <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">50</a></span></li> 
     <li class="row_style_3 align_center"><span class="pricing_yes"></span></li> 
     <li class="row_style_1 align_center"><span class="pricing_yes"></span></li> 
     <li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li> 
     </ul> 
    </div> 
    <div class="column_4"> 
     <ul> 
     <li class="header_row_1 align_center radius5_topright"> 
      <h2 class="col4">biz</h2> 
     </li> 
     <li class="header_row_2 align_center"> 
      <h1 class="col4">$<span>39</span></h1> 
      <h3 class="col4">per month</h3> 
     </li> 
     <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Unlimited</a></span></li> 
     <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">1000GB</a></span></li> 
     <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">Unlimited</a></span></li> 
     <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Unlimited</a></span></li> 
     <li class="row_style_4 align_center"><span class="pricing_yes"></span></li> 
     <li class="row_style_2 align_center"><span class="pricing_yes"></span></li> 
     <li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li> 
     </ul> 
    </div> 
    </div> 
<!-- DC Pricing Tables:3 End --> 
<div class="tsc_clear"></div> <!-- line break/clear line -->

而CSS：

div.tsc_pricingtable03 div.column_1, 
div.tsc_pricingtable03 div.column_2, 
div.tsc_pricingtable03 div.column_3, 
div.tsc_pricingtable03 div.column_4 { /* transitions */ -webkit-transition:box-shadow 0.1s ease; -moz-transition:box-shadow 0.1s ease; -o-transition:box-shadow 0.1s ease; -ms-transition:box-shadow 0.1s ease; transition:box-shadow 0.1s ease;} 
div.tsc_pricingtable03 div.column_1:hover, 
div.tsc_pricingtable03 div.column_2:hover, 
div.tsc_pricingtable03 div.column_3:hover, 
div.tsc_pricingtable03 div.column_4:hover { position:relative; z-index:100; left:-5px; top:-15px; /* shadow */ box-shadow:5px 0px 30px rgba(0, 0, 0, 0.5); -webkit-box-shadow:5px 0px 30px rgba(0, 0, 0, 0.5); -moz-box-shadow:5px 0px 30px rgba(0, 0, 0, 0.5);}

來源

2013-01-19 user123_456

混亂的問題。我相信他問的是 - 當你將鼠標懸停在第三張桌子的一列上時，它會彈出。這種彈出效果會導致表格下方的元素向下移動。他想阻止轉移。 – mrtsherman

請在您的問題中發佈相關的html和js（未鏈接），以及它們如何協同工作。所以這個問題應該避免'這是壞的 - 請看看它併爲我修復'流派。 – mrtsherman

@mrtsherman我只需要知道是什麼使這種行爲？因爲我真的看不到它。所有的代碼都在網頁中... html，JS –

見更正下面的css規則。

div.tsc_pricingtable03 div.column_1:hover, 
div.tsc_pricingtable03 div.column_2:hover, 
div.tsc_pricingtable03 div.column_3:hover, 
div.tsc_pricingtable03 div.column_4:hover { 

position: relative; 
z-index: 100; 
left: -5px; 
top: -15px; 
box-shadow: 5px 0px 30px rgba(0, 0, 0, 0.5); 
-webkit-box-shadow: 5px 0px 30px rgba(0, 0, 0, 0.5); 
-moz-box-shadow: 5px 0px 30px rgba(0, 0, 0, 0.5); 
margin-bottom: -30px; /// Note the added removal of the bottom margin that all "non" active elements have 
}

這是必要的，因爲你給包裝100％的高度，所以它總是會維持24px的填充。但是，要使:hover元素不改變包裝器的高度，您需要使該元素專門刪除由包裝器添加的所有填充以有效地忽略它。

來源

2013-01-19 18:48:32 Jared

在問題評論中提到的旁註中。你應該真的發佈相關的HTML標記和非'：hover'和'：hover' css。您可以簡單地複製並粘貼並點擊代碼格式按鈕，這將確保所需代碼（與此問題相關）始終保留......無論您需要在網站上做出哪些更改。 – Jared

謝謝你的回答。我更新了我的問題 –

比我最初的想法更好（將高度設置爲容器div的高度+ 30），+1 – vol7ron

您也可以考慮使用CSS transform屬性，該屬性也在第四個表中使用。例如：

.some_table .some-table-column:hover { 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    -o-transform: scale(1.1); 
}

CSS變換是非常理想的，因爲他們"allow to change the position of the affected content without disrupting the normal flow"。

來源

2013-01-19 19:03:04 Boaz

如何在不移動其他元素的情況下放大div

回答

相關問題