Эффект наведения на другой элемент не работает

Question

Я пытаюсь установить переход на элемент в отдельном контейнере на триггер зависания, но он не работает. Вот код (подробнее ниже):

body, 
 
html { 
 
    margin: 0; 
 
} 
 
.section { 
 
    width: 50vw; 
 
    height: 100vh; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline-block; 
 
} 
 
.left { 
 
    background-color: #ecf0f1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
} 
 
.right { 
 
    display: inline-block; 
 
    position: relative; 
 
    background-color: #e74c3c; 
 
    float: right; 
 
} 
 
.right::after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    right: 100%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    border: 50px solid transparent; 
 
    border-right: 40px solid #e74c3c; 
 
    transition: all 500ms; 
 
} 
 
.box:hover ~ .right::after { 
 
    top: 30%; 
 
} 
 
.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    margin: 0 auto; 
 
    cursor: pointer; 
 
    transition: all 300ms; 
 
} 
 
.box1 { 
 
    background-color: #9b59b6; 
 
    border-bottom: 8px solid #8e44ad; 
 
    border-right: 8px solid #8e44ad; 
 
} 
 
.box2 { 
 
    background-color: #3498db; 
 
    border-bottom: 8px solid #2980b9; 
 
    border-right: 8px solid #2980b9; 
 
} 
 
.box3 { 
 
    background-color: #2ecc71; 
 
    border-bottom: 8px solid #27ae60; 
 
    border-right: 8px solid #27ae60; 
 
}

<div class="section left"> 
 
    <div class="box box1"></div> 
 
    <div class="box box2"></div> 
 
    <div class="box box3"></div> 
 
</div> 
 
<div class="section right"></div>

Если я отнять «раздел влево» контейнер DIV, то парить работает по назначению и стрелка переводится вверх. Тем не менее, мне нужно держать «бокс» divs в контейнере, так как он должен сидеть слева от красного «правильного» контейнера (я не уверен, почему он еще не появился, хотя, если я поставлю «раздел слева» ПОСЛЕ . «раздел право» в HTML, то это позиционируется правильно, но тогда парить не работает независимо от того, если он находится в контейнере или нет)

Я также попробовал эти изменения не имели успеха:

.box:hover ~ .right:after { 
.box:hover > .right:after { 
.box:hover + .right:after { 
.box:hover .right:after { 
.box:hover.right:after { 

Answer 1

Вы должны использовать section:hover ~ right:after работать, потому что ~:

Выбирается каждый элемент, который предшествует <p> элемент

W3Schools

Если это не работает для вас, вы должны использовать JavaScript/JQuery.

Answer 2

Я уверен, что вы не можете сделать это с помощью только CSS. Чтобы выбрать родного родителя, вы должны использовать JS.