增加位置的宽度和高度:绝对
增加位置的宽度和高度:绝对
提问于 2014-03-28 13:09:12
我有一个圆元素(a元素)，它具有position: absolute和CSS3转换。在hover事件中，我想增加圆圈的高度和宽度，但是我想增加所有的像素，而不仅仅是在左边或右边。
下面是示例：http://jsfiddle.net/xWCp2/
在上面的例子中，您可以观察到，增加的高度和宽度将增加像素的左边和底部的圆，而不是所有的边。
我如何处理这个问题？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-03-28 13:22:18
如果元素必须是position: absolute，则必须通过在悬停时调整其位置来考虑大小的变化。
例如:如果从20 5px的宽度和高度变为30 5px的宽度和高度，则需要将顶部和右边的位置更改为5 5px以下，以保持其相对于圆周的中心点。
--一种更好的方法是使用CSS转换。
.circle-item:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}Stack Overflow用户
发布于 2014-03-28 13:21:26
您可以将此行添加到悬停，其值将更改宽度/高度的一半：
margin-top: -5px;
margin-right: -5px;JSF：http://jsfiddle.net/xWCp2/6/
使用填充顶，您可以强制内容保持在原地：
padding-top: 5px;JSF：http://jsfiddle.net/xWCp2/8/
Stack Overflow用户
发布于 2014-03-28 13:22:02
我认为这是因为原来的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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22713805
复制相关文章
相似问题
腾讯云开发者
