Hover child div not change color of text in another div

Question

On hover child div(.box-container), another child div(.carousel-buttons) not change color.

.carousel-slide {
  position: relative;
  width: inherit;
  .carousel-buttons {
    position: absolute;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    width: 1240px;
    top: 43%;
  }
  .box-container {
    display: flex;
    justify-content: space-between;
    position: relative;
  }
  .box-container:hover+.carousel-buttons {
    color: red;
  } //not change text color
  .box-container:hover .carousel-buttons {
    color: red;
  } //not change text color
  .box-container:hover~.carousel-buttons {
    color: red;
  } //not change text color
  .box-container:hover {
    background-color: red;
  } //work, change background color
}

<div class="carousel-slide">
  <div class="carousel-buttons">
    <button class="left">prev</button>
    <button class="right">next</button>
  </div>

  <div class="box-container container">
    test
  </div>
</div>

Answer 1

.box-container must be before .carousel-buttons

.box-container:hover + .carousel-buttons button {
  color: red;
}

<div class="carousel-slide">
 <div class="box-container container">
    test
  </div>
  <div class="carousel-buttons">
    <button class="left">prev</button>
    <button class="right">next</button>
  </div>
</div>