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; 
} 

我希望这有助于解决您的问题:)