增加位置的寬度和高度：絕對

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; 
}