改变保证金，但保持固定的元素

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

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

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

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

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

Answer 3

提供的保证金悬停块，调整容器上边距：

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

我有类似的问题，3D按钮（：悬停行动按它）。
我需要改变动画（所有）的所有属性在期待一个，因为通过更改边距（逻辑）成长的元素的总高度。

效果是，所有的下一个元素puhsing太。
基本上，为了解决这个问题，我做了一个反向余量转换。
如果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; 
} 

和多田！