HTML all the element move when we hover to the hovered elements?

Question

When I am using hover in the element all the other element move right side what can be the reason behind that I am having this issue many time in many other pages

Here is my code of HTML

 li:hover{border:solid 1px black;}

  <html lang=en> <head> <title>Testing</title> <meta charset= utf-8> </head> <body> <div id="container"> <section id="main"> <h1 >Home Page</h1> </section> <section id="list"> <ul> <li class="list">Home</li> <li>about</li> <li>blog</li> <li>contact</li> </section> <section id = "para"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor and vitality, so that the labor and sorrow, some important things to do eiusmod. Over the years, I will come, who will nostrud aliquip out of her the advantage of exercise, so that stimulus efforts if the school district and longevity. Want to be a pain in the cupidatat cillum has been criticized in the Duis et dolore magna flee produces no resultant pleasure. Excepteur cupidatat blacks are not excepteur, is soothing to the soul, that is, they deserted the general duties of those who are to blame for your troubles.</p> </section> </div> </body> </html>

CSS code

In above code html page you can see when we move cursor on the contact the all the below data ie paragraph move towards bottom. I have this issue in many pages.

Answer 1

A border is basically colored padding. All you need to do is add padding to the li elements that are not hovered.

 li:hover{border:solid 1px black;} li:not(:hover){padding-top:1px;padding-bottom:1px;}

 <html lang=en> <head> <title>Testing</title> <meta charset= utf-8> </head> <body> <div id="container"> <section id="main"> <h1 >Home Page</h1> </section> <section id="list"> <ul> <li class="list">Home</li> <li>about</li> <li>blog</li> <li>contact</li> </section> <section id = "para"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor and vitality, so that the labor and sorrow, some important things to do eiusmod. Over the years, I will come, who will nostrud aliquip out of her the advantage of exercise, so that stimulus efforts if the school district and longevity. Want to be a pain in the cupidatat cillum has been criticized in the Duis et dolore magna flee produces no resultant pleasure. Excepteur cupidatat blacks are not excepteur, is soothing to the soul, that is, they deserted the general duties of those who are to blame for your troubles.</p> </section> </div> </body> </html>

Answer 2

Just give your li elements a transparent border, or a border the same color as the background.

 li { border: solid 1px transparent; } li:hover { border: solid 1px black; }

 <html lang=en> <head> <title>Testing</title> <meta charset=u tf-8> </head> <body> <div id="container"> <section id="main"> <h1>Home Page</h1> </section> <section id="list"> <ul> <li class="list">Home</li> <li>about</li> <li>blog</li> <li>contact</li> </section> <section id="para"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor and vitality, so that the labor and sorrow, some important things to do eiusmod. Over the years, I will come, who will nostrud aliquip out of her the advantage of exercise, so that stimulus efforts if the school district and longevity. Want to be a pain in the cupidatat cillum has been criticized in the Duis et dolore magna flee produces no resultant pleasure. Excepteur cupidatat blacks are not excepteur, is soothing to the soul, that is, they deserted the general duties of those who are to blame for your troubles. </p> </section> </div> </body> </html>

HTML all the element move when we hover to the hovered elements?

Question

2 answers

solution1
1 2017-12-19 02:51:07

solution2
1 ACCPTED 2017-12-19 05:55:29

HTML all the element move when we hover to the hovered elements?

Question

2 answers

solution1 1 2017-12-19 02:51:07

solution2 1 ACCPTED 2017-12-19 05:55:29

solution1
1 2017-12-19 02:51:07

solution2
1 ACCPTED 2017-12-19 05:55:29