如何在一箇中心放置一個放大的div在盤旋時？

Question

這是一個棘手的問題。

這是我的HTML標記。

<div class="foo"> 
     <div class="bar"> 
      <div class="a"> 
        <h2>Luigi's Mansion1</h2> 
        <small>08/27/2013</small> 

        <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://dribbble.com/shots/1212598-Luigi-s-Mansion" target="_blank">Artwork by Scott Balmer</a> </p> 
       </div> 
     </div> 

     <div class="bar"> 
       <div class="a"> 
        <h2>Luigi's Mansion1</h2> 
        <small>08/27/2013</small> 

        <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://dribbble.com/shots/1212598-Luigi-s-Mansion" target="_blank">Artwork by Scott Balmer</a> </p> 
       </div> 
     </div> 
    </div> 

CSS

.foo{ 
    width: 299px; 
    background: #f0f0f0; 
    border-right: 1px solid #fff; 
    border-top: 1px solid #ccc; 
    margin: 0 auto; 
} 

.bar{ 
    margin: 0; 
    width: 400px; 
    height: 100px; 
    background: #f0f0f0 url(images/nav_a.gif) repeat-x; 
    float: left; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #fff; 
    border-right: 1px solid #ccc; 
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s; 
    -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s; 
    -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ; 
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s; 
} 

.bar:hover { 
    background: #ddd; 
    cursor: pointer; 
    margin: -20px; 
    width: 410px; 
    height: 120px; 
} 

這裏有JSFiddle工作鏈路。

我在這裏要做的是，如果我將鼠標懸停在任何一個帶有「欄」類的div容器中，我希望看到div欄類的尺寸變大，即其寬度和高度。但隨着它們的尺寸變大，我希望它的位置在屏幕中心保持不變。因此，我試圖產生的效果是，div的尺寸會從中心點向外增長，而不會導致其下的其他div移動？因爲如果你看JSFiddle鏈接，其他條形divs會移動，副作用是不正確的。除非我將鼠標懸停在他們身上，否則他們應該保持原位。

有人建議這是可能實現或不？我真的需要編寫JavaScript來處理這種類型的效果嗎？

讓我知道你是否需要其他東西來澄清我的問題。

Answer 1

如果我理解正確，這是你想要的嗎？

http://jsfiddle.net/j9DUN/4/

我只是改變了內.bar:hover

margin: 0 -5px -20px; 

• 頂緣緣：0，因爲我們不希望頂部位置移動
• 左，右-margin：-5px，因爲div的寬度是10px，所以同樣分享
• 底部邊距：-20px，因爲潛水的高度是20px（並且不希望下一個div移動）