Estoy sacando datos de una base de datos y me salen varios registros, lo organizo cada uno en una card. En ellos tengo un campo oculto que cuando pase el ratón por la "I" me mostrara el resultado, actuar sobre el mismo campo sobre el que paso el ratón por encima si funciona, pero quiero que al pasar el ratón por encima de una clase me muestre otra.
HTML
<div class="row">
@foreach ($complementos as $comp)
<div class="col-4 center">
<div class="tarjetaComple1 corrigeTarjetas">
<i class="fas fa-info-circle info muestraAlegenos"></i>
<div class="tarjetaIMG">
<img src="{{ asset("images/complementos/{$comp->imagen}") }}" alt="" class="corrigeImagenComple">
</div>
<div class="espacioTarjeta">
<h2>{{ $comp->nombre }}</h2>
@if ($comp->unidades == null)
@else
<div class="cantidad">{{ $comp->unidades }}und.</div>
@endif
</div>
<div class="medidas21">
<div class="pvpOtros3">{{ number_format($comp->precio, 2) }}€</div>
</div>
<div id="alerg" class="divAler">
hola esto es una prueba
</div>
</div>
</div>
@endforeach
</div>
JavaScript
$( ".muestraAlegenos" ).mouseenter(function() {
$(this).find('.divAler').css("opacity"," 1");
$(this).find('.divAler').css("transition","1s");
});
$( ".muestraAlegenos" ).mouseleave(function() {
$(this).find('.divAler').css("opacity"," 0");
$(this).find('.divAler').css("transition","1s");
});
Pero no consigo que funcione y es algo que me tiene mosqueado, por que es algo que hice en otra web y funcionaba sin problema.