悬停时奇怪的导航文本行为

Question

我有一个 css 问题，我无法调试。我对主导航中的悬停做了一个 'highlight' 效果，它似乎在文本后面和下方突出显示了一点。这按预期工作。

但是在两个较长的导航链接上，退出悬停状态会导致文本从右侧滑入，就像在悬停状态结束时缩小和展开一样。

您可以在上面的 gif 中看到这一点 - 悬停状态工作得很好，但是当离开悬停状态时，第二个和第四个导航链接中的文本似乎重置并从右侧滑入。

我对此感到困惑 - 我从未见过这样的东西，而且这个主题 (Astra) 对我来说是新的。显然悬停状态与非悬停状态有一些不同。也许这与正确对齐的导航文本有关？我不知道：/

您可以在 https://allytutoring.com/writing-resources/

现场观看

Answer 1

问题出在你的悬停效果上：在 :before 选择器中，悬停时，你将位置设置为“绝对”，这意味着当项目 not 悬停时，内容位置是静态的 - 所以它“推动”你的菜单项。

你应该尝试将所有不会改变的东西都放在你的初始状态，并且只添加 css 改变你的悬停选择器的属性：

#primary-menu .menu-link::before { /* This is your initial state */
    content: '';
    display: block;
    width: 0;
    position: absolute;
    background-color: rgba(47,139,255,0.8);
    height: .8em;
    top: 1.5em;
    left: 5%;
    z-index: 1;
    transition-duration: .25s;
 }
 #primary-menu .menu-link:hover::before { /* This is your hover state */
    width: 0;
 }