Tengo un componente sencillo:
<div class="ox-input-group">
<!--Aqui va el icono-->
<div class="ox-group-icon">
<i class='bx bx-user'></i>
</div>
<!--Aqui va la caja de texto-->
<input class="ox-form-control ox-input-primary">
</div>
Como puedo hacer para que cuando haga hover en el input, afecte el icono?. Intente hacer esto:
.ox-input-group input:hover + ox-input-group .ox-group.icon{
color: rgba(222, 55, 46);
}
Pero no me funciono, alguna sugerencia??
hover
sobre el.ox-input-group
no es una opción? – Marcos el 23 sep. 20 a las 20:57+
se aplica al siguiente elemento, en tu caso buscas afectar al anterior elemento, lamentablemente CSS3 no tiene un selector para tal caso, sin embargo Jquery si posee un método llamado.prev()
que te podría servir. Te dejo un enlace con mas referencias. riptutorial.com/es/jquery/example/9900/… – Ultimatux el 23 sep. 20 a las 20:58