弹性容器中的 ul 项目在悬停时移动

Question

我正在使用 bootstrap 4 和很棒的字体图标。

我正在尝试创建带有动画的侧导航栏。每当我将鼠标悬停在 ul 项目上时。它下方的所有项目都向上移动，将悬停的项目隐藏在其下方。

如何防止这种行为？

<style type="text/css">
        .sidenav .container {
            position: fixed;
            overflow-x: visible;
            max-width: 50px;
            top: 15%;
            max-height: 70%;
            justify-content: left;
            padding-left: 0;
            z-index: 1;
        }

        .nav-item .btn {
            color: lightgray;
            width: 100%;
            background-color: #343a40;
            border-bottom: #0c0c0c solid;
            border-radius: 0 10px 10px 0;
            transition: color 400ms, width 400ms;
        }

        .sidenav .btn:focus {
            box-shadow: none !important;
        }

        .nav-item:hover > .btn:hover {
            background-color: lightgray;
            color: #343a40;
            width: 75px;
            position: absolute;
        }
</style>
<div class="sidenav">
        <div class="container">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <button class="btn" data-toggle="modal" data-target="#notebookModal"><i
                            class="fas fa-clipboard-list fa-2x"></i></button>
                </li>
                <li class="nav-item">
                    <button class="btn" data-toggle="modal" data-target="#addNoteModal"><i
                            class="fas fa-plus-circle fa-2x"></i></button>
                </li>
            </ul>
        </div>
    </div>

Answer 1

您将 :hover 选择器放在 .nav-item 上，而不仅仅是 .btn。我认为您需要将其更改为：

.nav-item > .btn:hover {
        background-color: lightgray;
        color: #343a40;
        width: 75px;
        position: absolute;
    }

Answer 2

为防止它们向上移动，请从悬停的 class:

中删除 position: absolute

.nav-item > .btn:hover {
    background-color: lightgray;
    color: #343a40;
    width: 75px;
}

编辑添加：

将鼠标悬停在一个按钮上会影响其他按钮的宽度，因为宽度已设置为 100%。要解决此问题，请将非悬停按钮更改为 100% 以外的值（因为其他非悬停按钮变为 100% 宽，随悬停过渡而变化）。

您可以选择值，例如 width: 55px;，或者根据 bootstrap .btn 填充计算它，这是我检查时的左填充 .75rem元素。您为 sidenav 容器指定了 50px 的宽度和 0 的左填充，因此您可以使用 calc() 来确定如果 rem 值发生变化，100% 是多少：

.nav-item > .btn {
  color: lightgray;
  width: calc(50px + .75rem);
  background-color: #343a40;
  border-bottom: #0c0c0c solid;
  border-radius: 0 10px 10px 0;
  transition: color 400ms, width 400ms;
}

弹性容器中的 ul 项目在悬停时移动

ul items in flex container shift on hover

html

css

font-awesome

bootstrap-4