当您同时悬停更多物品时，为什么我的物品会向左移动？答案

【问题标题】：Why do my items go left when you hover more of them simultaneously?当您同时悬停更多物品时，为什么我的物品会向左移动？
【发布时间】：2022-11-09 01:42:40
【问题描述】：

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

HTML：

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

CSS：

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

这是我使按钮更宽的 JavaScript 代码：

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 = "";
}));

我认为原因可能在于 Javascript，因为当您快速激活多个 addEventListener（鼠标悬停和鼠标悬停）时，.buttons DIV 会移动。

【问题讨论】：

标签： html css web navigation addeventlistener

【解决方案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;

}

【讨论】：