html - 增加:absolute位置的宽高

Question

我有一个带有 position: absolute 和 CSS3 过渡的圆形元素(a 元素)。在 hover 事件中，我想增加圆的高度和宽度，但我想在所有边上添加像素，而不仅仅是在左侧或右侧。

示例如下:http://jsfiddle.net/xWCp2/

在上面的示例中，您可以观察到增加高度和宽度会向圆的左侧和底部添加像素，而不是所有边。

我该如何解决这个问题？

Answer 1

如果元素必须是position: absolute，那么您必须在鼠标悬停时通过调整其位置来考虑尺寸的变化。

例如:如果您要从 20 像素的宽度和高度变为 30 像素的宽度和高度，您需要将顶部和右侧的位置减少 5 像素，以使其相对于圆的中心点.

更好的方法是使用 CSS 转换。

.circle-item:hover {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}