Как сделать работу наведения на неэлементном или дочернем элементе

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