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?+
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/…