HTML-Hover-Grenze, wenn wir die anderen Elemente bewegen, um das Problem zu lösen?

unten schreibe ich den HTML-Code, in dem Ausgabe , wenn wir Grenze zu dem Element in Hover hinzufügen das Problem entsteht können Sie sehen, dass sogar so die Frage ist, wie loswerden von beweglichen Element wollen wir Ruheelement zu bleiben nur noch in vielen meiner Web-Seiten dieses Problem auftritt so helfen sie mir bitte mit dem Detail zu beantworten, was der Grund dafür ist nicht nur die Lösung dieses speziellen Code
https://codepen.io/shahrishit9/pen/aEdJWa?editors=1100 in diesem codepan auch wir können sich die gleichen Dinge passieren überprüfen es bitteHTML-Hover-Grenze, wenn wir die anderen Elemente bewegen, um das Problem zu lösen?

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>

Quelle

2017-12-19 Rishit Shah

Es ist, weil wenn Sie den Rahmen hinzugefügt, die Höhe des Elements zusätzlich 2px extra erhöht. Diese zusätzliche Höhe zeigt, wie sich das Element ein wenig bewegt. Sie können den transparenten Rahmen für Ihr Element zunächst anwenden und dann den tatsächlichen Rahmen beim Hover anwenden. Auf diese Weise erhalten Sie keine Differenzierung bezüglich der Elementposition.

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

DEMO

Quelle

2017-12-19 06:16:31

ändern es wie folgt aus:

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

Codepen link

Quelle

2017-12-19 06:18:27

Leider Geck, neu zu Stackoverflow. Ich weiß nicht, wie man richtig schreibt. https://codepen.io/codepenforkapil/pen/LOvopP?editors=0100 –

HTML-Hover-Grenze, wenn wir die anderen Elemente bewegen, um das Problem zu lösen?

Antwort

Verwandte Themen