Question

I think this will be easier to show you than explain, but basically I am trying to create a transition effect on two separate div tags when the user hovers over one of them. Here’s an example I just whipped up. It’s not perfect, I’m just trying to figure out how to split the robot in half.

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

currently, the right half will move when you hover over it, but I want both left halves and the right have to open up so it looks like the robot is coming apart.

thanks in advance for your help!

edit: p.s. something small that annoys me that I don’t know if it’s “fixable” is if div element slides past the user’s mouse when the element is being hovered over, it glitches. is there an easy way to fix this?

Answer 1

Maybe if you nest the divs you might be able to target the parent div.
So you get something like this:

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