边框属性使导航稍微移动答案

【问题标题】：border property makes the navigation move slightly边框属性使导航稍微移动
【发布时间】：2020-07-12 13:10:54
【问题描述】：

请参考以下内容：-

谁能告诉我如何防止导航链接在悬停时轻微移动？它与border-right 属性有关，但我不知道如何防止它。我尝试在悬停状态下设置边框：无，我还尝试在 li 和 a 标签上设置边框 1 px 实心透明。我也尝试过谷歌搜索，但找不到任何东西。

您能否告诉我如何在光标进入列表项后立即删除右边框（一旦变为红色，然后使边框不可见/消失）。

Ps 请告知您在谷歌中输入的内容以找到此解决方案 - 它可能是我在谷歌搜索时使用的术语，因为它会在某个地方出现，但从我自己的学习角度来看，你们中的哪一个会很好如果您遇到我的情况，就会输入。

提前谢谢你。

【问题讨论】：

请与我们分享Minimal, Reproducible Example — 打开外部链接可能很危险，而且它们可能会过时。但是根据您的描述，应该使用透明边框“技巧”。一旦您在此处分享了您的问题的最小案例，我们可以更好地提供帮助（首选 SO Snippet）。
这能回答你的问题吗？ CSS bottom border hover "jitter"
尝试在选择器“menu li a”而不是悬停伪选择器上添加边框规则

【解决方案1】：

在没有边框的地方添加边框会导致元素的大小增加 2 倍（左 + 右，上 + 下）。你的悬停边框是透明的，那么目的是什么？

如果要更改悬停时的边框颜色，请从透明边框开始，然后只需更改悬停时的边框颜色：

li a {
  border: 1px solid transparent;
}

li a:hover {
  border-color: white;
}

或者，您可以添加边框和负边距来抵消它，例如：

li a {
  border: 1px solid white;
  margin: -1px;
}

【讨论】：

嗨，我已经在 li 内的 a 标签上有了边框，我的部分问题是我有边框：在 [li a] 悬停状态下有 1px 纯色透明 - 一旦我删除了悬停的透明边框然后“抖动不再存在”。现在我有一个问题，在悬停时我仍然可以看到右边框，当我将鼠标悬停在菜单项上时我不再希望它可见，但是当鼠标没有悬停在菜单项上时我确实希望它可见. - 有什么想法吗？