Question

有两个框（ Box1 ， Box2 ），当我将鼠标悬停在边距和填充上时会展开。他们获得定制课程和设计。它们都向左浮动，以便它们可以彼此相邻。

HTML：

<div class="contentbox-lg stk-left bg-red">
  <p class="contentbox-content">Box1</p>
</div>
<div class="contentbox-lg stk-left bg-blue">
  <p class="contentbox-content">Box2</p>
</div>

CSS：

/* Content Box Main CSS */

.contentbox-lg {
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  padding: 50px;
  width: 50px;
  height: 50px;
  margin-left: 50px;
  margin-top: 50px;
}

.contentbox-lg:hover {
  border: 3px;
  border-style: solid;
  border-color: black;
  padding: 73px;
  margin-left: 25px;
  margin-top: 25px;
}

.contentbox-content {
  top: 50%;
  left: 50%;
  color: white;
}

.stk-left {
  float: left;
}


/* Content Box Colors */

.bg-blue {
  background-color: #2980b9;
}

.bg-blue:hover {
  background-color: #3498db
}

.bg-red {
  background-color: #c0392b;
}

.bg-red:hover {
  background-color: #e74c3c
}

让我受苦的问题是当 Box1 悬停时，第二个框稍微向右移动，当 Box2 悬停时，第一个框没有＆＃ 39;移动当 Box1 被悬停时，我不希望 Box2 移动。

查找jsfiddle演示here

Answer 1

摆脱悬停移动的一种方法是在方框上使用position:absolute

Like this

.contentbox-lg {
  position: absolute;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  padding: 50px;
  width: 50px;
  height: 50px;
  margin-left: 50px;
  margin-top: 50px;
}

.contentbox-lg { left: 200px;}
.contentbox-lg:first-child { left: 0;}

Answer 2

在margin-right:-25px

上使用否定:hover

Demo

.contentbox-lg:hover {
  border: 3px;
  border-style: solid;
  border-color: black;
  padding: 73px;
  margin-left: 25px;
  margin-top: 25px;
  margin-right:-25px;
}

Answer 3

我不认为这是内联框的最佳方式，但使用您的代码可以执行此操作：

1）将填充更改为偶数（填充：74px而不是填充73px） 2）然后，你只需添加margin-right：-27px;在.contentbox-lg中：悬停

那是：

.contentbox-lg:hover {
  border: 3px;
  border-style: solid;
  border-color: black;
  padding: 74px; /* change to 74px */
  margin-left: 25px;
  margin-top: 25px;
  margin-right: -27px; /* add this line */
}

在展开时修复元素的位置

3 个答案:

Demo