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

Question

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

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

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

预先感谢您的帮助！

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

Answer 1

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

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