鼠标悬浮后元素变高并向上突出的实现

今天我在做链接的悬浮效果，基本情况是这样的：父元素绝对定位，里面子元素浮动，一行多个链接。就是红框里的部分。代码里面可以看出来，子元素初始高度为128px

/* 网上展馆等一排 */
.links-container .banner-links {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 17px;
}

/* 里面的每一项 */
.links-container .banner-links .banner-link-item {
	position: relative;
	width: 233px;
	height: 128px;
	margin-right: 8px;
}

悬浮的时候需要改变链接的背景图和高度，这个看起来很简单，我改了高度后，看看效果，瞬间就不淡定了：

.banner-links .banner-link-item:hover {
	height: 160px;
}

很明显，悬浮的链接变高了，可是很悲剧，它与兄弟的头部在同一水平线上，底部保持在父元素被定位的bottom这里，它的兄弟全被拔高了！

我本来以为是父元素bottom定位的原因，改成top也是一样的效果；这里的关键在于，高度变高了，是往下沉的，那么为了抵消往下沉的效果，就必须让它下沉的同时往上移动它下沉的距离！这里有两个问题：1.怎么让它向上移动？我今天没有用到任何CSS3的东西，所以拒绝使用transform的translate移动，如果用position：relative然后top负值移动的话也不行，它原本的位置还是在那里，它的高度还是占了空间，这个时候可以使用margin。想象一下，margin-top如果为正值，会让当前元素远离上一个元素，是向下移动的，那么为负值呢？自然就是相反的方向，也就是向上移动了（假如当前元素高度不确定，margin负值会撑大当前元素的高度；如果高度确定，就是让当前元素上移。这里hover后我设置了高度为160，是固定高度，所以元素没有另外变大）2.让它上移多少才合适？这里不要凭感觉来设置哦，这样既麻烦，还不准确。答案就藏在代码中啦——默认高度是128px,悬浮高度是160px，所以相差的高度是160 - 128 = 32，假如它上移32px，就刚好“赶上了”它的兄弟们的底部；那么既然他们兄弟的底部在同一水平线上，那当然就会整整齐齐地出现在父元素定位的bottom的位置上了。

.banner-links .banner-link-item:hover {
	height: 160px;
	margin-top: -32px;
}

最终效果如下图所示。当当当当，大功告成！