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

我的页面有3个水平放置的div。当中间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>

.container
{
位置：绝对；底部：0；右侧：0；左侧：0；
右边距：自动；左边距：自动；
宽度：50%；高度：10%；
}
.a{位置：绝对；底部：0；左侧：20px；宽度：30%；}
B
{
位置：绝对；底部：0；右侧：0；左侧：0；
右边距：自动；左边距：自动；宽度：30%；
}
.c{位置：绝对；底部：0；右侧：20px；宽度：30%；}
.b:悬停+.a{
-moz变换：translatex（-50px）；
-ms变换：translatex（-50px）；
-o-变换：translatex（-50px）；
-webkit转换：translatex（-50px）；
转换：translatex（-50px）；
}
.b:悬停+c{
-moz变换：translatex（50px）；
-ms变换：translatex（50px）；
-o-变换：translatex（50px）；
-webkit转换：translatex（50px）；
转换：translatex（50px）；
}
b组
a组
c组

将选择器从+更改为~：

悬停{

悬停{

使用而不是

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

---

一般同级组合器
通用同级组合符由“tilde”（U+007E，~）字符组成，用于分隔两个简单选择器序列。两个序列表示的元素在文档树中共享同一父元素，第一个序列表示的元素在前面（不一定立即）由第二个元素表示的元素

所以你的规则应该是

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

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

---

---

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

我尝试使用左/右属性，但它不能平滑地向外和向内滚动。当前，我的代码使用divs中的transition属性来启用此功能。如果我要使用左/右属性，如何帮助divs轻松自如ht属性？谢谢。@chris，您可以使用转换进行左/右更改…尽管您必须以固定方式指定移动的位置，但请查看…（我的意思是左/右是绝对位置，而不是像

translatex

is那样的相对位置）谢谢您的提示！从您那里学到了一些新东西。