CSS - 擴大懸停股利和不動其他的div

Question

我需要創建產品網：

• 對於固定DIV高度;
• 展開 - 僅在div：hover上顯示大文本;
• 請勿移動其他divs。
• CSS

工作示例： http://rozetka.com.ua/mobile-phones/c80003/filter/preset=smartfon/

我的代碼： http://jsfiddle.net/JfNsu/6/

CSS

.product-grid {} 
.item_box_in2 { 
    display: inline-block; 
    border: 1px #DDD solid; 
    width: 30%; 
    float: left; 
    margin-left: 5px; 
    margin-bottom: 5px; 
    background-color: #f1f1f1; 
    height: 15em; 
    overflow:hidden;} 
.item_box_in2:hover { 
    overflow: visible; 
    height: auto; 
} 

HTML

<div class="product-grid"> 
<!--Product 1--> 
<div class="item_box_in2">  
<h1>Title 1</h1> 
    <p>Text 1</p> 
    <p>Price 1</p> 
    <p>Desk 111111111 111111111 11111111</p> 
</div> 
<!--Product 2--> 
<div class="item_box_in2"> 
<h1>Title 2</h1> 
    <p>Text 2</p> 
    <p>Price 2</p> 
    <p>Desk 222222222 2222222222 22222222222 222222222 222222222222 22222222222222 222222222222 222222222222222 22222222222222 22222222222222 222 222222222222 22222222222 2222222222222222 2222222222222222222222 222222 22222222222 22222222222</p> 
</div> 
<!--Product 3--> 
<div class="item_box_in2"> 
<h1>Title 3</h1> 
    <p>Text 3</p> 
    <p>Price 3</p> 
    <p>Desk 333333333 333333333 33333333333333333 333333333333333 333333333333333 3333333333333333 33333333333333333333 33333</p> 
</div> 
<!--Product 1--> 
<div class="item_box_in2"> 
<h1>Title 1</h1> 
    <p>Text 1</p> 
    <p>Price 1</p> 
    <p>Desk 111111111 111111111 11111111</p> 
</div> 
<!--Product 2--> 
<div class="item_box_in2"> 
<h1>Title 2</h1> 
    <p>Text 2</p> 
    <p>Price 2</p> 
    <p>Desk 222222222 2222222222 22222222222 222222222 222222222222 22222222222222 222222222222 222222222222222 22222222222222 22222222222222 222 222222222222 22222222222 2222222222222222 2222222222222222222222 222222 22222222222 22222222222</p> 
</div> 
<!--Product 3--> 
<div class="item_box_in2"> 
<h1>Title 3</h1> 
    <p>Text 3</p> 
    <p>Price 3</p> 
    <p>Desk 333333333 333333333 33333333333333333 333333333333333 333333333333333 3333333333333333 33333333333333333333 33333</p> 
</div> 
</div> 

Answer 1

你也許是最好的給每個div的那麼一個唯一的ID定位他們（不與相對的，因爲當他們展開它會移動它們），併爲每個ID進行懸停例如

ID-TopRowBox1:hover { 
    height: 400px; 
    position: absolute; 
    z-index: 9999; 
} 
ID-BottomRowBox1:hover { 
    height: 400px; 
    position: absolute; 
    z-index: -9999; 
} 

我希望這有助於解決您的問題:)