Question

我在这里有一个简单的JSFiddle演示：http://jsfiddle.net/cppvf4eb/

当悬停在绿色区块上时，我希望两个方块将另外两个方块推开10个像素。目前我使用此代码来实现效果：

#block2:hover {
    margin: 0px 10px;
}

当前行为使蓝色块保持静止，但我希望绿色块保持不动。也许保证金不是最好的解决方案，让我知道是否有更好的。 如果存在，我更喜欢仅限CSS的解决方案。

澄清：最终目标是能够将鼠标悬停在每个单独的块上，并在任何边界块之间创建10px空间。我不介意端块移动位置，但是对于中间块，我想要一种让它静止的效果，而是将其他两个推开。

Answer 1

这个小提琴应该符合你的需要：

.row:hover {
    margin: 0px -10px;
}

.row .block:hover {
    margin: 0px 10px;
}

http://jsfiddle.net/qmm1m3wh/3/

Answer 2

给悬停块提供边距，调整容器上的边距：

.row {
    margin-left: 50px;
}
.block {
    width: 50px;
    height: 50px;
    float: left;
}
.row:hover {
    margin: 0px 40px;
}
.block:hover {
    margin: 0px 10px;
}
#block1 {background-color: blue}
#block2 {background-color: green}
#block3 {background-color: red}
#block4 {background-color: orange}
#block5 {background-color: yellow}

<div class="row">
    <div id="block1" class="block"></div>
    <div id="block2" class="block"></div>
    <div id="block3" class="block"></div>
    <div id="block4" class="block"></div>
    <div id="block5" class="block"></div>
</div>

Answer 3

听父母div上的悬停怎么样？

.row:hover #block1 {
    margin: 0px -10px;
}

.row:hover #block2 {
    margin: 0px 10px 0 20px;
}

http://jsfiddle.net/cppvf4eb/1/

Answer 4

我有一个与3D按钮类似的问题（：悬停动作按下它）我需要在一段时间内用动画（全部）改变所有属性，因为元素的总高度通过改变边距（逻辑）而增长。

效果是所有下一个元素也是如此基本上，为了解决这个问题，我做了一个反向保证金转换 如果margin-top增加3，我也会减少margin-bottom。

例如：

.btn-default {
  margin-top: 0;
  margin-bottom: 3px;
  border-color: @border-color;
  box-shadow: 0 5px 0 @border-color;
  background-color: @background-color-light;
  color: @color;
  transition: @btn-default-time-transition linear; /* vendorless fallback */
  -o-transition: @btn-default-time-transition linear; /* opera */
  -moz-transition: @btn-default-time-transition linear; /* Firefox */
  -webkit-transition: @btn-default-time-transition linear; /*safari and chrome */
}

.btn-default:hover {
  margin-top: 3px;
  margin-bottom: 0;
  box-shadow: 0 2px 0 @border-color;
  border-color: @border-color;
  background-color: @background-color-light-hover;
  color: @color-hover;
}

tada！

悬停时更改边距但保持元素静止

4 个答案: