CODEWITHSUNDEEP
htmlcss
sunjeep
sunjeep

Reputation: 128

Why is div moving in hover state?

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

HTML

<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

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

}
.two{
  margin-bottom:5px;

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

Link to my code

Upvotes: 1

Views: 583

Answers (2)

Hunter Turner
Hunter Turner

Reputation: 6894

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>

Upvotes: 1

Black Sheep
Black Sheep

Reputation: 6694

You can solve this by assign a border transparency

see demo

.two {

  border:1px solid transparent;
}

Upvotes: 0

Related Questions