Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Move 2 different divs on hover on a third different div

Move 2 different divs on hover on a third different div

Problem

My page has 3 Divs that are located horizontally. I need to make the 2 divs move to the sides of the page (left div move to Left, and right div move to right) when the center div is on hover. I can make the left div move, but the right div isn't moving. I hope to get this achieved using CSS, if not please advise. Thanks a lot.

My code is like the below:

.container 
   {
    position:absolute; bottom:0; right:0; left:0;
    margin-right:auto; margin-left:auto;
    width:50%; height:10%;
   }
.a {position:absolute; bottom:0; left:20px; width:30%;}
.b 
   {
    position:absolute; bottom:0; right:0; left:0;
    margin-right:auto; margin-left:auto; width:30%;
   }
.c {position:absolute; bottom:0; right:20px; width:30%;}

.b:hover + .a{
-moz-transform:translatex(-50px);
-ms-transform:translatex(-50px);
-o-transform:translatex(-50px);
-webkit-transform:translatex(-50px);
transform:translatex(-50px);
}

.b:hover + .c{
-moz-transform:translatex(50px);
-ms-transform:translatex(50px);
-o-transform:translatex(50px);
-webkit-transform:translatex(50px);
transform:translatex(50px);
}

Div b
Div a
Div c
Problem courtesy of: Chris Goh

Solution

change the selectors from + to ~:

.b:hover ~ .a{

.b:hover ~ .c{

http://jsfiddle.net/YYhTS/

Solution courtesy of: Gavriel

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Move 2 different divs on hover on a third different div

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×