如何停止此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);}
答案 0 :(得分：5)
请参阅下面更正的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元素更改包装器的高度，您需要使该元素专门删除包装器添加的所有填充以有效地忽略它。
答案 1 :(得分：4)
您还可以考虑使用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"。