增加位置的宽度和高度：绝对

Question

我有一个圆形元素（a元素）与position: absolute和CSS3过渡。在hover事件中，我想要增加圆的高度和宽度，但是我希望不仅在左侧或右侧向所有面添加像素。

这里是例子：http://jsfiddle.net/xWCp2/

在上面的例子中，你可以观察到，增加高度和宽度将像素添加到圈子，没有各方的左侧和下侧。

我该如何解决这个问题？

Answer 1

如果元素必须是position: absolute，那么你就必须考虑到通过鼠标悬停时调整其位置，大小的变化。

例如：如果从20px的宽度和高度到30px的宽度和高度，则需要将顶部和右侧位置更改为少5px，以使其相对于圆的中心保持不变点。

这样做的更好的方法将与CSS转换。

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

Answer 2

您可以添加此线徘徊，其值的一半宽度/高度的变化：

margin-top: -5px; 
margin-right: -5px; 

JSF：http://jsfiddle.net/xWCp2/6/

随着填充顶，你可以强制内容留在原地：

padding-top: 5px; 

JSF：http://jsfiddle.net/xWCp2/8/

Answer 3

我想这是因为你的原始CSS中并不总是应用这个额外的类。

JSFiddle Demo

CSS

.circle-item.small { 
    position: absolute; 
    border-radius: 50%; 
    line-height: 20px; 
    font-family: Arial, verdana, tahoma; 
    font-size: 13px; 
    font-weight: bold; 
    text-align: center; 
    display: block; 
    -webkit-transition: all 0.1s ease-out; 
    -moz-transition: all 0.1s ease-out; 
    -ms-transition: all 0.1s ease-out; 
    -o-transition: all 0.1s ease-out; 
    transition: all 0.1s ease-out; 
    border: 3px solid #7f8c8d; 
    background-color: rgba(0, 0, 0, 0.03);  
    width: 20px; 
    height:20px; 
    line-height: 20px; 

} 

.circle-item.small:hover { 
    width: 30px; 
    height:30px; 
    line-height: 30px; 
    text-decoration: none; 
}