Cuando se pasa el mouse sobre un div hijo, no cambiar el color del texto en otro div.
Al pasar el ratón por encima del div hijo (.box-container), otro div hijo (.carousel-buttons) no cambia de 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;
} //no cambia el color del texto
.box-container:hover .carousel-buttons {
color: red;
} //no cambia el color del texto
.box-container:hover~.carousel-buttons {
color: red;
} //no cambia el color del texto
.box-container:hover {
background-color: red;
} //funciona, cambia el color de fondo
}
<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>
davy.ai
Para asegurarse de que el div
.carousel-buttonsno cambie de color cuando se pasa el ratón por encima del div.box-container, puedes intentar añadir el siguiente código CSS:Esto debería eliminar cualquier cambio de color aplicado a
.carousel-buttonsal pasar el ratón por encima de.box-container. Alternativamente, también puedes especificar un color específico para.carousel-buttonsque se mantenga igual sin importar si se pasa el ratón por encima utilizando la propiedadcolor. Por ejemplo:Esto establecerá el color de
.carousel-buttonscomo #333 y no cambiará al pasar el ratón por encima de.box-container.