css链接元素在悬停时跳跃 [英] css link element jumps on hover

问题描述

我试图在悬停时围绕链接放置边框，样式适用于它，但是当我将鼠标悬停在它上面时，它跳转（元素跳跃）...我可以做什么？
code：

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

解决方案

您可以使用

 
 code> .navigation li：hover {
 border-color：#ccc; 
} 
 
 .navigation li {
 border：1px solid＃< parentBackgroundColor / transparent> ;; 
} 
  

这样，边界就在这里从开始，所以没有跳跃悬停，它是不可见的，因为它是相同的父容器的颜色或透明。

I am trying to put a border around a link on hover, and the style applies to it, but it jumps (the element jumps) when i hover over it... what can I do? code:

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

解决方案

You 'jump' is caused by the 1px height of the border, that make your li move

You might use

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

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

instead. This way, the border is here from the beginning, so no jump on hovering, and it's invisible, since it's the same color of the parent container or transparent.

这篇关于css链接元素在悬停时跳跃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！