When hovering over the child div with class .box-container, the color of another child div with class .carousel-buttons does not change.
.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;
} //attempted to change text color, but did not work
.box-container:hover .carousel-buttons {
color: red;
} //tried to change text color, without success
.box-container:hover~.carousel-buttons {
color: red;
} //color change on hover not functioning for this selector
.box-container:hover {
background-color: red;
} //successfully changed background color on hover
}<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>