Question

我有一个带a和CSS3过渡的圆元素（position: absolute元素）。在hover事件中，我想增加圆的高度和宽度，但我想在左侧或右侧为所有边添加像素。

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

我该如何解决这个问题？

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，您可以强制内容保持原位：

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

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

3 个答案: