移动2个不同的div在悬停在第三个不同的div [英] Move 2 different divs on hover on a third different div

问题描述

我的网页有3个横向排列的div。我需要使2个div移动到页面的两侧（左div移动到左边，右div移动到右边），当中心div在悬停。我可以让左div移动，但右div不移动。我希望得到这个实现使用CSS，如果没有请指教。非常感谢。

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.

我的代码如下：

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

推荐答案

将选择器从+更改为〜：

change the selectors from + to ~:

.b：hover〜.a {

.b:hover ~ .a{

.b：hover〜.c {

.b:hover ~ .c{

http://jsfiddle.net/YYhTS/

这篇关于移动2个不同的div在悬停在第三个不同的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！