使用css悬停时停止图标颤抖

Question

我在悬停图标时设置背景颜色。

我的HTML元素

<span class="ion-qr-scanner Expand-img"></span>

我的CSS

.Expand-img{
    position: absolute;
    top: 5px;
    right: -2px;
    color: white;
    font-size: 25px;
}

.Expand-img:hover{
    background: #468483;
    padding: 0px 3px;   
}

现在我怎么能停止摇晃...... Thanx

Answer 1

将悬停状态的填充移动到.Expand-img类：

.Expand-img {
    position: absolute;
    top: 5px;
    right: -2px;
    font-size: 25px;
    color: white;
    padding: 0px 3px;  
}

.Expand-img:hover {
    background: #468483; 
}

悬停状态将从父级继承它，因此停止摇晃问题。

Answer 2

问题在于padding: 0px 3px;导致震动效果。