如何使悬停在非邻接子元素上工作

Question

我试图在用户悬停另一个div时使div更改其位置。触发移动的div对于移动的div不是父亲也不是亲密的。这可以用CSS来完成，还是我需要去js？

下面是代码：

.container{ 
 
    display: inline-block; 
 
} 
 

 
.redOnTop{ 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    opacity: 0.5; 
 
} 
 

 
.smallBlueBehind{ 
 
    display: inline-block; 
 
    position: relative; 
 
    left: -55px; 
 
    width: 50px; 
 
    height: 100px; 
 
    background: blue; 
 
    transition: 1s; 
 
    z-index: -10; 
 
} 
 

 
#redLeft:hover + #blueLeft{ 
 
    transition: 1s; 
 
    left: -5px; 
 
} 
 

 
#showingArea{ 
 
    display: inline-block; 
 
    position: relative; 
 
    //overflow: hidden; 
 
    width: 50px; 
 
    height: 100px; 
 
    left: -5px; 
 
    border: 1px solid black; 
 
} 
 

 
//------------------------------ HOW TO WRITE HERE! 
 
#redRight:hover #blueRight{ 
 
    transition: 1s; 
 
    left: 0px; 
 
}

<div class="container"> 
 
    <div class="redOnTop" id="redLeft"> 
 
    </div> 
 
    <div class="smallBlueBehind" id="blueLeft"> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="redOnTop" id="redRight"> 
 
    </div> 
 

 
    <div id="showingArea"> 
 
     <div class="smallBlueBehind" id="blueRight"> 
 
     </div> 
 
    </div> 
 
</div>

正如你可以看到我想要的右蓝色方块滑盖红场下并徘徊时在黑边的盒子结束说红场。和左边的一样..唯一不同的是我想要它在黑匣子里面。

Here is a codepen if someone likes that better.

任何建议都感激！谢谢。

Answer 1

可以使用邻近的选择，然后瞄准蓝色矩形...

#redRight:hover + #showingArea #blueRight{ 
    transition: 1s; 
    left: 0px; 
} 

.container { 
 
    display: inline-block; 
 
} 
 
.redOnTop { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    opacity: 0.5; 
 
} 
 
.smallBlueBehind { 
 
    display: inline-block; 
 
    position: relative; 
 
    left: -55px; 
 
    width: 50px; 
 
    height: 100px; 
 
    background: blue; 
 
    transition: 1s; 
 
    z-index: -10; 
 
} 
 
#redLeft:hover + #blueLeft { 
 
    transition: 1s; 
 
    left: -5px; 
 
} 
 
#showingArea { 
 
    display: inline-block; 
 
    position: relative; 
 
    //overflow: hidden; 
 
    width: 50px; 
 
    height: 100px; 
 
    left: -5px; 
 
    border: 1px solid black; 
 
} 
 
#redRight:hover + #showingArea #blueRight { 
 
    transition: 1s; 
 
    left: 0px; 
 
}

<div class="container"> 
 
    <div class="redOnTop" id="redLeft"> 
 
    </div> 
 
    <div class="smallBlueBehind" id="blueLeft"> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="redOnTop" id="redRight"> 
 
    </div> 
 

 
    <div id="showingArea"> 
 
    <div class="smallBlueBehind" id="blueRight"> 
 
    </div> 
 
    </div> 
 
</div>

codepen