css - CSS链接元素在悬停时跳转

Question

我试图在悬停链接上放置一个边框，并且样式适用于它，但是当我将鼠标悬停在其上时，它会跳（元素跳）...我该怎么办？
码：

  .navigation li:hover {
   border: 1px solid #ccc;
 }

Answer 1

您的“跳跃”是由边框的1像素高度引起的，使您的脚步移动

你可能会用

 .navigation li:hover {
   border-color: #ccc;
 }

 .navigation li {
   border: 1px solid #<parentBackgroundColor/transparent>;
 }

代替。这样，边框从一开始就在这里，因此悬停时不会跳转，并且它是不可见的，因为它与父容器的颜色相同或透明。