Skip to main content
se añadieron 1111 caracteres en el cuerpo
Origen Enlace
Miguel
  • 1.5k
  • 1
  • 21
  • 53

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.

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.

$( ".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.

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.

Origen Enlace
Miguel
  • 1.5k
  • 1
  • 21
  • 53

Evento mouseenter dinamico, actuar sobre otra clase

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.

$( ".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.