html - 如何在将鼠标悬停在另一个 上时阻止我的 元素移动？

Question

实例:https://jsfiddle.net/qnx8btw5/

<li>当我将鼠标悬停在其他元素上时，我的导航栏容器中的元素正在移动。我该如何阻止这种情况发生？

我知道我可以在悬停时设置大小以阻止这种情况发生，但我认为这不是解决此问题的最佳方法。

Answer 1

我认为发生这种情况是因为当您将鼠标悬停在列表项上时设置了 border-bottom。

您可以默认为您的列表项设置透明边框，如下所示

#navbar-container ul li{
  border-bottom:3px solid transparent;
}

使用它您的导航栏将不会移动。