Переместить 2 разных div при наведении на третий другой div - PullRequest
Новая
       5

Переместить 2 разных div при наведении на третий другой div

4 голосов
/ 29 марта 2012

Моя страница имеет 3 деления, которые расположены горизонтально. Мне нужно сделать так, чтобы 2 div переместились по сторонам страницы (левый div переместился влево, а правый div переместился вправо), когда центральный div находится при наведении. Я могу заставить левый div двигаться, но правый div не двигается. Я надеюсь добиться этого с помощью CSS, если нет, пожалуйста, сообщите. Большое спасибо.

Мой код похож на ниже: 

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

Ответы [ 2 ]

3 голосов
/ 29 марта 2012

изменить селекторы с + на ~:

.b: hover ~ .a {

.b: hover ~ .c {

http://jsfiddle.net/YYhTS/

0 голосов
/ 29 марта 2012

Используйте общий братский комбинатор ~ вместо соседнего братского комбинатора +

соседний братский комбинатор
Соседний братский комбинатор состоит из символа «плюс» (U + 002B, +), который разделяет две последовательности простых селекторов.Элементы, представленные двумя последовательностями, имеют одного и того же родителя в дереве документа, и элемент, представленный первой последовательностью , непосредственно предшествует элементу, представленному второй последовательностью .

Общий братский комбинатор
Общий братский комбинатор состоит из символа "тильда" (U + 007E, ~), который разделяет две последовательностипростых селекторов.Элементы, представленные двумя последовательностями, имеют одного и того же родителя в дереве документа, и элемент, представленный первой последовательностью, предшествует ( не обязательно сразу ) элементу, представленному второй .

Таким образом, ваши правила должны быть 

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

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

Кроме того, для эффекта, который вы используете в данный момент, вы можете просто изменить левую / правую характеристики ... вместо преобразования..

...