css链接元素在悬停时跳转

Question

我试图在悬停时在链接周围放置边框,并且样式适用于它,但是当我将鼠标悬停在它上面时它会跳跃(元素跳跃)...我该怎么办？码:

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

Answer 1

你'跳'是由边界的1px高度引起的,这使你的移动

你可能会用

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

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

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

Answer 2

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

您可以border在不悬停时添加透明,然后不会跳转.

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

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