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上的工作链接。

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

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

如果您需要其他任何内容来澄清我的问题，请告诉我。

Answer 1

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

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

我只更改了.bar:hover

内的保证金

margin: 0 -5px -20px;

上边距：0，因为我们不希望顶部位置移动
左右边距：-5px，因为div宽10px，平等分享
底部边距：-20px，因为潜水高20px（并且不希望下一个div移动）

如何在悬停在中心时将放大的div放在中心？

1 个答案: