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

【问题标题】：HTML hover border when we hover the all other element moves how to solve issue?HTML悬停边框当我们悬停所有其他元素移动时如何解决问题？
【发布时间】：2017-12-19 05:42:06
【问题描述】：

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

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>

【问题讨论】：

标签： html css hover border

【解决方案1】：

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

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

DEMO

【讨论】：

【解决方案2】：

改成这样：

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

Codepen link

【讨论】：

对不起，老兄，stackoverflow 的新手。我不知道如何正确地写答案。 codepen.io/codepenforkapil/pen/LOvopP?editors=0100