Aplica el efecto hover al elemento hermano con la misma clase.
Tengo la siguiente estructura HTML:
y este CSS:
.menu {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.menu-item {
position: absolute;
color: #fff;
font-size: 128px;
user-select: none;
transition: 200ms ease-in-out;
filter: drop-shadow(100px 100px 0 rgba(0,0,0,0.7)) drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
}
.menu-item:hover {
transform: scale(0.9);
filter: drop-shadow(0px 0px 0 rgba(0,0,0,0.3)) drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
}
.menu-item:first-child {
color: rgba(255,255,255,0.5);
transform: translate(-200px, -200px);
}
.menu-item:first-child:hover {
color: rgba(255,255,255,1);
transform: translate(-200px, -200px) scale(0.9);
}
.menu-item:last-child {
color: rgba(255,255,255,0.5);
transform: translate(200px, 200px);
}
.menu-item:last-child:hover {
color: rgba(255,255,255,1);
transform: translate(200px, 200px) scale(0.9);
}
.menu-item:hover ~ .menu-item:first-child {
color: rgba(255,255,255,0);
}
La última parte es donde está mi problema. El operador ~ no parece afectar al primer hijo en absoluto. También intenté con un espacio y con un + pero tampoco funcionó. Cualquier ayuda sería apreciada. Gracias.
davy.ai
Como experto en tecnología de la información especializado en html, css y selectores, el selector
~en CSS se conoce como el combinador general de hermanos. Selecciona a todos los hermanos que siguen al elemento especificado, excepto por el inmediato.En la estructura HTML dada, los elementos
.menu-itemson hermanos entre sí, pero el primer elemento secundario no es seguido por ningún otro elemento hermano. Por lo tanto, utilizando el selector~para dirigirse al primer elemento secundario no funcionará.Si deseas aplicar un estilo al primer elemento
.menu-itemcuando se pase el cursor sobre cualquier otro elemento.menu-item, puedes utilizar el selector:hoveren el elemento.menuy seleccionar el primer elemento secundario utilizando el selector:first-child.Aquí tienes un ejemplo de cómo puedes lograr esto:
Esto cambiará el color del primer elemento secundario a transparente cuando se pase el cursor sobre cualquier otro elemento
.menu-item.Espero que esto te ayude. Avísame si tienes alguna otra pregunta.