css链接元素在悬停时跳转

Question

我试图在悬停时在链接周围放置边框，并且样式适用于它，但是当我将鼠标悬停在它上面时它会跳跃（元素跳跃）...我能做什么？ 代码：

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

Answer 1

你的“跳跃”是由边框的 1px 高度引起的，这使你的 li 移动

你可能会使用

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

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

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

Answer 2

.navigation li {
    border: 1px solid transparent;
}

当你没有悬停时，你可以添加一个透明的边框，这样它就不会跳跃了。

或者，您可以删除元素周围总共 2px 垂直 padding，例如：

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