Move 2 different divs on hover on a third different div

问题

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 class="container">
    <div class="b">Div b</div>
    <div class="a">Div a</div>
    <div class="c">Div c</div>
</div>

回答1:

change the selectors from + to ~:

.b:hover ~ .a{

.b:hover ~ .c{

http://jsfiddle.net/YYhTS/

回答2:

Use the general sibling combinator ~ instead of the adjacent sibling combinator +

Adjacent sibling combinator
The adjacent sibling combinator is made of the "plus sign" (U+002B, +) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence immediately precedes the element represented by the second one.

General sibling combinator
The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

So your rules should be

.b:hover ~ .a{
 ...
}

.b:hover ~ .c{
 ...
}

Additionally, for the effect you currently use, you could just change the left/right porperties.. instead of transforming..

来源：https://stackoverflow.com/questions/9924068/move-2-different-divs-on-hover-on-a-third-different-div

标签

css3

hover