Переход только один div среди других с использованием CSS

Question

У меня есть набор div, который динамически вставляется в обертку div.
Конечный продукт - это нечто похожее на Dock в OSX.

Мой вопрос в том, как перейти только к div, который находится под курсором мыши в любом случае? Предпочтительно использовать только CSS.

Проблема с JSFiddle.

Вот HTML структура:

<div class="dock"> 

    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

CSS:

.dock{ 
    display:relative; 
    padding:5px; 
    position:fixed; 
    bottom:0; 
    left:50%; 
} 

.dock div{ 
    width:64px; 
    height:64px; 
    background:black; 
    float:left; 
    transition: margin-bottom 0.5s; 
} 
.dock div:hover{ 
    margin-bottom:10px; 
} 
.dock div:nth-child(n+2){ 
    margin-left:5px; 
} 

.dock:after{ 
    content:""; 
    background:green; 
    position:absolute; 
    bottom:0; 
    left:0; 
    height:42px; 
    width:100%; 
    z-index:-1; 
} 

Чтобы было ясно:
Прямо сейчас на зависший над любой DIV, все четыре перехода дивы. Моя цель - только переместить div, на который нависает, а не все из них.

Answer 1

Дивы все двигаются вверх, потому что они выровнены в верхней части своего родительского элемента, и вы добавили край к нижней части одного, расширяя родительский элемент.

Рассмотрим вместо этого делать:

.dock div{ 
    width:64px; 
    height:64px; 
    background:black; 
    float:left; 
    margin-top: 10px; 
    transition: margin-top 0.5s; 
} 
.dock div:hover{ 
    margin-top:0px; 
} 

... т.е. удалить край сверху, а не добавлять его в нижней части.