1

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.

2
  • Olvidaste incluir un HTML de ejemplo para poder probar y sugerirte algo.
    – Triby
    Commented el 21 sept. 2020 a las 19:09
  • Perdona @Triby ya lo añadí!! gracias
    – Miguel
    Commented el 21 sept. 2020 a las 19:11

1 respuesta 1

1

Lo único que te faltaba era obtener el contenedor padre .closest('div'), que es el que comparten ambos elementos y, desde ahí, encontrar el que quieres cambiar con .find():

Para afectar a todos los elementos debes hacerlo directamente por clase, sin padre y sin this:

$('.divAler').css("opacity"," 0");

Para evitar afectar al elemento actual, debes obtenerlo en una nueva variable para poder incluirlo en .not():

$( ".muestraAlegenos" ).mouseenter(function() {
  // Obtener .divAler del elemento actual
  let divAler = $(this).closest('div').find('.divAler');
  // Solo para elemento actual
  $(divAler).css("opacity"," 0.5");
  // En resto de elementos
  $('.divAler').not($(divAler)).css("opacity"," 1");
});

$( ".muestraAlegenos" ).mouseleave(function() {
  // Ocultar todos
  $('.divAler').css("opacity"," 0");
});
.divAler {
  background:#ddd;
  opacity:0;
  transition:all 1s ease;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
     <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>
                <div class="cantidad">{{ $comp->unidades }}und.</div>
             </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>
     <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>
                <div class="cantidad">{{ $comp->unidades }}und.</div>
             </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>
     </div>

2
  • Perfecto funciona perfectamente, y por último si quiero que haga algo en todos menos en el que estoy? antes lo hacia así: $('.port').not($(this)).css('opacity', '0.5');
    – Miguel
    Commented el 21 sept. 2020 a las 19:41
  • Se sigue usando .not() pero debes ser muy específico en el elemento a excluir, this no sirve porque corresponde a <i>
    – Triby
    Commented el 21 sept. 2020 a las 19:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.