div在使用css悬停后滑动

问题描述：

我创建了该框，当我将鼠标悬停在该框上时，该框滑动到我不想要的右侧。我需要当用户悬停在盒子上，然后显示边框而不滑动。div在使用css悬停后滑动

你能帮我吗？

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

答

您可以简单地设置padding-left: 0当元素为:hover ED-过来的，所以它不会移动。这里有一个例子：

.wid-30 { 
 
    width: 30%; 
 
} 
 

 
.bg { 
 
    background-color: red; 
 
} 
 

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

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

答

您需要添加border-left: 10px solid red;内.bg

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

答

试试这个。如果您设置了框尺寸属性，则红色div的尺寸不会更改。如果在悬停时删除填充，则会阻止p翻译。

.wid-30{width: 30%;box-sizing:border-box} 
 
.bg{background-color: red;} 
 
.wid-30:hover{border-left: 10px solid yellow;padding-left:0;} 
 
.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>

干得好使用'箱sizing'。这似乎是最优雅的解决方案。 –

答

喜欢这个？我用box-sizing: border-box，设置上悬停padding-left: 0和调整宽度相应地：

边界框：width和height属性（和最小/最大特性）包括内容，填充和边界，但不是余量

.wid-30{ 
 
    width: calc(30% + 20px); 
 
    box-sizing: border-box; 
 
} 
 
.bg{background-color: red;} 
 
.wid-30:hover{ 
 
    border-left: 10px solid yellow; 
 
    padding-left: 0; 
 
} 
 
.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>

div在使用css悬停后滑动

相关推荐