改變保證金，但保持固定的元素

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

和多田！