html - 使用CSS悬停后Div正在滑动

Question

我已经创建了盒子，当我将鼠标悬停在盒子上时，盒子会滑到我不想要的右侧。我需要当用户将鼠标悬停在框上时显示边框而不滑动。

你愿意帮我吗？

.wid-30{width: 30%;}
.bg{background-color: red;}
.wid-30:hover{border-left: 10px solid yellow;}
.padding{padding: 10px;}

<div class="wid-30 bg padding">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies diam a dui auctor commodo. Proin nulla nibh, fermentum eu purus quis, hendrerit posuere arcu</p>
</div>

Answer 1

需要在.bg中添加border-left: 10px solid red;

.wid-30 {
  width: 30%;
}

.bg {
  background-color: red;
  border-left: 10px solid red;
}

.wid-30:hover {
  border-left: 10px solid yellow;
}

.padding {
  padding: 10px;
}

<div class="wid-30 bg padding">
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies diam a dui auctor commodo. Proin nulla nibh, fermentum eu purus quis, hendrerit posuere arcu</p>
</div>