Question

所以我使用内联块排列了几个链接。当我将鼠标悬停在一个上面时，我希望它变得更大。我正在使用jQuery的animate（）函数。

问题是，当链接的高度发生变化时，它旁边的所有链接都会向下移动，然后在您离开链接时备份。我希望链接在顶部保持垂直对齐。

这就是我所拥有的：

.thumbs-wrapper { width: 100%; position: relative; margin: 20px 0 0 0; }
.thumbs { height: 65px; position: absolute; background-color: #A0A0A0;
          top: 0; right: 0; }
.thumbs a { border: 2px solid #02AFEC; cursor: pointer; display: inline-block;
            height: 30px; width: 70px; background-color: #FFFFFF; }


$('.thumbs a').hover(function () {
    $(this).animate({ 'height': '50px', 'width': '80px' }, 'fast');
}, function () {
    $(this).animate({ 'height': '30px', 'width': '70px' }, 'fast');
});


<div class="thumbs-wrapper">
    <div class="thumbs">
        <a>Link 1</a>
        <a>Link 2</a>
        <a>Link 3</a>
    </div>
</div>

我创建了一个jsFiddle：http://jsfiddle.net/kd9XP/2/。虽然动画似乎不是出于某种原因而起作用。

Answer 1

将vertical-align: top;添加到.thumbs a的CSS。

http://jsfiddle.net/mblase75/kd9XP/4/

Answer 2

添加

vertical-align:top;

到 .thumbs a 规则集

.thumbs a { border: 2px solid #02AFEC; cursor: pointer; display: inline-block;
        height: 30px; width: 70px; background-color: #FFFFFF; vertical-align:top}

Answer 3

我在你的jsFiddle示例中向CSS添加了float: left;。这项工作附：我还将使用过的框架从Mootools更改为jQuery。

使用jQuery animate（）更改大小时移动的内联块锚点

3 个答案: