移动2个不同的div在悬停在第三个不同的div [英] Move 2 different divs on hover on a third different div
本文介绍了移动2个不同的div在悬停在第三个不同的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{
这篇关于移动2个不同的div在悬停在第三个不同的div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文