使用CSS仅转换一个div

我有一组

div

，它们被动态插入包装

div

。
最终产品类似于OSX中的Dock

我的问题是如何在任何情况下仅转换鼠标悬停下的div？最好只使用CSS。

下面是问题的一个简单例子

以下是HTML结构：

<div class="dock">
 
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

要清楚：

---

现在悬停在任何div上，所有四个div都会转换。我的目标是只转换悬停在上面的div，而不是所有div。

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

---

。。。ie删除顶部的边距，而不是在底部添加边距。

没有收到您的问题。问题仍然存在，因为所有的

div都转换到顶部。我只希望有一个div在上面转换，就是那个悬停在上面的div。与OSX中的Dock类似。在编辑JSFIDLE后是否单击“运行”？因为我给出的解决方案完全符合你的要求。我的错是，我确实点击了run，但我猜是出了问题。有效，谢谢：）
.dock div{
  width:64px;
  height:64px;
  background:black;
  float:left;
  margin-top: 10px;
  transition: margin-top 0.5s;
}
.dock div:hover{
  margin-top:0px;
}