Ребят, всем привет. Подскажите, как поправить css, чтобы блоки при наведении перестали скакать как сумашедшие:
песочница -
https://codepen.io/Ekaterina_Poluk/pen/LYzOYVJ
<div class="per">
<div id="block-icon">
<a href="#" id="favor-ic"><span>❤</span>Избранные</a>
<a href="#" id="compar-ic"><span>☰</span>Сравнение</a>
<a href="#" id="cart-ic"><span>❒</span>Корзина</a>
</div>
</div>
.per {
display: flex;
flex-direction: column;
position: fixed;
top: 150px;
right: 240px;
width: 80px;
}
#block-icon a {
position: absolute;
left: 270px;
transition: 0.3s;
padding: 15px;
width: 150px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
}
#block-icon a:hover {
left: 0;
}
#favor-ic {
top: 20px;
background-color: #f44336;
}
#favor-ic span {padding-right: 28px;}
#compar-ic {
top: 80px;
background-color: #2196F3;
}
#compar-ic span {
margin-right: 35px;
transform: rotate(90deg);
display: inline-block;
}
#cart-ic {
top: 140px;
background-color: #4CAF50;
}
#cart-ic span {padding-right: 53px;}