targetig multiple css elements with css3 transition

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?

moleculezz · Accepted Answer · 2011-10-09 20:57:40Z

3

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 {
    ....
}

answered Oct 9, 2011 at 20:57

moleculezz

7,7034 gold badges27 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rich Bradshaw Over a year ago

Yep, hover on the whole container, change the properties of the internal elements.

Collectives™ on Stack Overflow

targetig multiple css elements with css3 transition

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related