Javascript 当鼠标悬停在上方时，如何将放大的div定位在中心？

这有点棘手

这是我的HTML标记

这是上的工作链接

我在这里尝试做的是，如果我将鼠标悬停在任何一个带有bar类的div容器中，我希望看到div bar类的尺寸被放大，即它的宽度和高度。但随着他们的尺寸被放大，我希望它在屏幕中央的位置仍然保持不变。因此，我试图产生的效果是，悬停的div的尺寸将从其中心点向外增长，而不会导致其下方的另一个div移动？因为如果你看一下JSFiddle链接，其他的条div会被移动，其副作用是不正确的。除非我把鼠标悬停在它们上面，否则它们应该保持在原来的位置

有人能告诉我这是否可能实现吗？我真的需要编写javascript来处理这种效果吗

---

如果您还需要我澄清我的问题，请告诉我。

如果我理解正确，这就是您想要的吗

我只更改了其中的边距。栏：悬停

顶部边距：0，因为我们不希望顶部位置移动 左右边距：-5px，因为div的宽度是10px，所以平均分享这个值 底部边距：-20px，因为下潜比下潜高20px，不希望下一个下潜移动

---

是的。就是这个主意！我很高兴我的问题有点道理。。。很高兴你明白了。这与我在构建自己的js插件时所寻找的解决方案非常接近，如果有一个div容器列表，并且用户悬停其中任何一个，则悬停的项目将被放大，当您悬停其他div容器项目时，其尺寸将被恢复。谢谢

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

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

margin: 0 -5px -20px;