HTML 当我们悬停所有其他元素时悬停边框移动如何解决问题？

Question

下面我写的 HTML 代码有问题当我们在悬停中向元素添加边框时，问题出现了，您甚至可以看到所以问题是如何摆脱我们希望休息元素保持静止的移动元素在我的许多网页中出现这个问题所以请帮我详细回答是什么原因，而不仅仅是解决这个特定的代码
https://codepen.io/shahrishit9/pen/aEdJWa?editors=1100 在这个codepan中我们也可以看到同样的事情发生请检查

body{background-color:pink;font-family-arial;font-size:1.10em;}
#para{
margin:0px 50px 30px 50px;}
#footerMenu {text-align:center;}
#creator{text-align:center;}
a{padding:0px 10px;margin:10px;text-decoration:none;color:black;}
a:hover{border: solid 2px lightblue;}

<HTML lang ="en">
  <head>
    <title>
      My new footer
    </title>
    <meta charset = utf-8>
  </head>
  <body>
    <div>
      <section id="para">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </section>
      <footer>
      <section id="footerMenu">
        <a href=https://www.instagram.com/>Instagram</a>
        <a href=https://www.facebook.com/>Facebook</a>
      <a href=https://www.twitter.com/>Twitter</a>
    <a href="">Site Map</a>
    
      </section>
<section Id="creator">
         design and code by Rishit Shah
  </section>
      </footer>
    </div>
    
  </body>
  </HTML>

Answer 1

因为添加边框的时候，元素的高度额外增加了2px。额外的高度显示为元素移动了一点。您可以最初为您的元素应用透明边框，然后在悬停时应用实际边框。这样你就不会在元素位置上得到区分。

li {
   line-height:10px;
   display:block;
   padding:10px;
   max-width:150px;
   text-align:center;
   margin:10px; 
   border:1px solid transparent;
}

DEMO

Answer 2

改成这样：

a{border:solid 2px transparent;} // Add this with your other css property.
a:hover{
  border-color: lightblue;
}

Codepen link

HTML 当我们悬停所有其他元素时悬停边框移动如何解决问题？

HTML hover border when we hover the all other element moves how to solve issue?

html

css

border

hover