css - 使用 css3 过渡定位多个 css 元素

Question

我认为向您展示这比解释更容易，但基本上我试图在用户将鼠标悬停在其中一个标签上时在两个单独的 div 标签上创建过渡效果。这是我刚刚举出的一个例子。它并不完美，我只是想弄清楚如何将机器人分成两半。

http://color-reel.com/growbot.html

目前，当您将鼠标悬停在右半部分上时，右半部分会移动，但我希望左半部分和右半部分都必须打开，这样看起来机器人就要散架了。

预先感谢您的帮助!

编辑:附注有一件小事让我烦恼，我不知道它是否“可修复”，如果 div 元素在悬停在元素上时滑过用户的鼠标，它就会出现故障。有没有简单的方法可以解决这个问题？

Answer 1

如果您嵌套 div，也许您可​​以定位父 div。 所以你会得到这样的结果:

#parent:hover #three,
#parent:hover #four {
    ....
}