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

您需要在border-left: 10px solid red;

中添加.bg

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以在元素padding-left: 0编辑时简单地设置:hover，以便它不会移动。这是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

试试这个。如果设置box-sizing属性，则红色div的dimensione不会改变。如果在悬停时删除填充，则会阻止p转换。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

border-box：宽度和高度属性（以及最小/最大属性）包括内容，填充和边框，但不包括边距

＆＃13;

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

＆＃13;

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

＆＃13;

使用css

4 个答案: