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

Question

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

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

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

提前感谢您的帮助！

编辑：附注令我烦恼的是我不知道它是否“可修复”的一些小问题是，当元素悬停时，div 元素是否滑过用户的鼠标，它会出现故障。有没有简单的方法来解决这个问题？

Answer 1

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

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