使用 CSS 仅转换一个 div

Question

我有一组动态插入包装div的div。
最终产品类似于OSX中的Dock。

我的问题是关于如何仅转换鼠标悬停下的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 都会过渡。我的目标是只转换悬停在上面的div，而不是全部。

Answer 1

div 都在向上移动，因为它们与父元素的顶部对齐，并且您在一个元素的底部添加了边距，从而扩展了父元素。

请考虑改为这样做：

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

。即删除顶部的边距，而不是将其添加到底部。