sunjeep sunjeep - 1 month ago 11
CSS Question

Why is div moving in hover state?

I have two divs and why those divs are moving while hovering?

HTML code:

<div class="two">
<label class="one">
<input type="radio"> Sanjeev
</label>
</div>
<div class="two">
<label class="one">
<input type="radio"> Hari
</label>
</div>


CSS code:

.one{
border:1px solid red;
display:block;
opacity:0.5;

}
.two{
margin-bottom:5px;

}
.two:hover{
border:1px solid red;
}


Link to my code:
https://jsbin.com/rotiwat/edit?html,css,output

Answer

This is happening because on hover you're adding a border which is changing the dimensions of the div.

You can fix this by setting a transparent border before the hover.

.one{
  border:1px solid red;
  display:block;
  opacity:0.5;
}
.two{
  margin-bottom:5px;
  border: 1px solid transparent;
}
.two:hover{
  border:1px solid red;
}
<div class="two">
  <label class="one">
    <input type="radio"> Sanjeev
  </label>
  </div>
  <div class="two">
  <label class="one">
    <input type="radio"> Hari
  </label>
  </div>

Comments