javascript - 悬停时更改边距但保持元素静止

Question

我这里有一个简单的 JSFiddle 演示:http://jsfiddle.net/cppvf4eb/

当鼠标悬停在绿色方 block 上时，我希望两个方 block 将另外两个方 block 推开 10 个像素。目前我使用这段代码来实现效果:

#block2:hover {
    margin: 0px 10px;
}

当前的行为使蓝色方 block 保持静止，但我希望绿色方 block 保持不动。也许 margin 不是最好的解决方案，让我知道是否有更好的解决方案。 如果存在，我更喜欢纯 CSS 解决方案。

澄清:最终目标是能够将鼠标悬停在每个单独的 block 上，并在任何边界 block 之间创建一个 10 像素的空间。我不介意末端 block 移动位置，但对于中间 block ，​​我想要一种让它保持静止的效果，而不是将另外两个 block 推开。

Answer 1

这个 fiddle 应该符合您的需要:

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

.row .block:hover {
    margin: 0px 10px;
}

http://jsfiddle.net/qmm1m3wh/3/