Question

我的页面有3个水平位置的div。当中心div处于悬停状态时，我需要将2个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>

Answer 1

将选择器从+更改为〜：

.b：悬停〜.a {

.b：悬停〜.c {

http://jsfiddle.net/YYhTS/

Answer 2

使用general sibling combinator ~代替adjacent sibling combinator +

相邻兄弟组合
相邻的兄弟组合子由“加号”（U + 002B，+）字符组成，该字符分隔两个简单选择器序列。由两个序列表示的元素在文档树中共享相同的父元素，并且由第一个序列表示的元素紧接在由第二个序列表示的元素之前。

一般兄弟组合器
通用兄弟组合器由“波浪号”（U + 007E，〜）字符组成，它将两个简单选择器序列分开。由两个序列表示的元素在文档树中共享相同的父元素，并且由第一个序列表示的元素先于（不一定立即）由第二个序列表示的元素 。

所以你的规则应该是

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

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

此外，对于您当前使用的效果，您只需更改左/右属性..而不是转换..

在第三个不同的div上悬停时移动2个不同的div

2 个答案: