divはcoverを使ってホバリングした後にスライドします

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

それが動かないように、要素は、:hover ED-以上であるときは、単にpadding-left: 0を設定することができます。これを試してみてください

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

Answer 2

あなたは.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>

Answer 3

内border-left: 10px solid red;を追加する必要があります。ここでは一例です。 ボックスサイズ設定プロパティを設定すると、赤いdivのdimensioneは変更されません。 ホバー上のパディングを削除すると、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>

は

Answer 4

？ Iは、box-sizing: border-boxを使用ホバーにpadding-left: 0を設定し、それに応じて幅調整：

境界ボックス：widthおよびheightプロパティ（および最小/最大特性）コンテンツ、パディングとボーダーを含むがないマージン

`ボックスsizing`を使用して

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