为什么div在悬停状态下移动？

Question

我有两个div，为什么那些div在徘徊时会移动？

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

Answer 1

这种情况正在发生，因为在悬停时你正在添加一个正在改变div尺寸的边框。

您可以通过在悬停前设置透明边框来解决此问题。

.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>

Answer 2

您可以通过指定边框透明度来解决此问题

see demo

.two {

  border:1px solid transparent;
}