我的页面有 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>
最佳答案
关于css - 悬停在第三个不同的 div 上时移动 2 个不同的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9924068/