我已经创建了盒子,当我将鼠标悬停在盒子上时,盒子会滑到我不想要的右侧。我需要当用户将鼠标悬停在框上时显示边框而不滑动。
你愿意帮我吗?
.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>
最佳答案
需要在.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>
关于html - 使用CSS悬停后Div正在滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45501570/