当你同时悬停更多的项目时，为什么我的项目会向左

Question

我在页面右侧有一个导航，我制作了一个动画，当你悬停在按钮上时，它会放大并显示页面名称。

// This is the JavaScript code where I make the Buttons Wider:
document.querySelectorAll(".nav-button").forEach(elem => elem.addEventListener("mouseover",
() => {
elem.querySelector(".nav-hover").style.width = "300%";
}));
document.querySelectorAll(".nav-button").forEach(elem => elem.addEventListener("mouseout",
() => {
elem.querySelector(".nav-hover").style.width = "";
}));

.navigation {
z-index: 10;
position: absolute;
right: 0px;
}
.navigation .buttons {
position: absolute;
top: 50%;
transform: translate(-50%, -50%) !important;
}
.button-el {
height: 65px;
margin-bottom: 30px;
}
.button-el i {
color: var(--text-color);
font-size: 28px;
position: relative;
float: right;
margin-top: 15px;
margin-right: 15px;
}
.nav-hover {
z-index: -1;
transition: width .5s ease-out, opacity 0s, all 1s;
position: relative;
width: 65px;
height: 65px;
border-radius: 500px;
float: right;
background-color: var(--dark1);
border: var(--accent1) 3px solid;
}

<div class="buttons">
<div class="nav-button button-el home">
<div class="active"></div>
<div class="nav-hover">
<i class="fa-solid fa-house"></i>
</div>
</div>
<div class="nav-button button-el home">
<div class="active"></div>
<div class="nav-hover">        
<i class="fa-solid fa-user-large"></i>
</div>
</div>
<div class="nav-button button-el home">
<div class="active"></div>
<div class="nav-hover">        
<i class="fa-solid fa-house"></i>
</div>
</div>
</div>

我认为原因可能在Javascript中，因为当您快速激活多个addEventListener(mouseover和mouseout(时，.buttons DIV会移动。

Answer 1

问题出在.navigation .buttons选择器中：

.navigation .buttons {
position: absolute;
top: 50%;
transform: translate(-50%, -50%) !important;
}

似乎是translate(x, -50%)中的x改变了它。现在看起来是这样的：

.navigation .buttons {
position: absolute;
top: 50%;
right: 67%;
transform: translate(0, -50%) !important;
}