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>

來源

2017-08-04 Narendra Verma

您可以簡單地設置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>

來源

2017-08-04 08:17:13

您需要添加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>

來源

2017-08-04 08:17:21

試試這個。如果您設置了框尺寸屬性，則紅色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>

來源

2017-08-04 08:21:23

幹得好使用'箱sizing'。這似乎是最優雅的解決方案。 –

-1

喜歡這個？我用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>

來源

2017-08-04 08:25:28 SVSchmidt

div在使用css懸停後滑動

回答

相關問題