Hover effect on different element not working

Question

I'm trying to put a hover transition on an element in a separate container to the hover trigger but it's not working. Here's the code (more details below):

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>

If I take away the "section left" container div, then the hover works as intended and the arrow is translated up. However, I need to keep the "box" divs in the container as it's supposed to be sitting to the left of the red "right" container (I'm not sure why it's not yet, although if I put "section left" AFTER "section right" in the HTML then it's positioned correctly, but then the hover doesn't work regardless of if it's in a container or not.)

I've also tried these variations with no success:

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

Answer 1

You got to use section:hover ~ right:after to work, because ~:

Selects every element that are preceded by a <p> element

W3Schools

If that doesn't work for you, you got to use JavaScript/jQuery.

Answer 2

I'm pretty sure you can't do that with just CSS. To select a parent's sibling you should use JS.