1

estoy tratando de hacer un hover con Jquery pero no tengo exito, al pasar el mouse se me activa el hover para ambos elementos pero quiero que solo afecte al que le paso el mouse, aun asi quiero que mantengan la misma clase ya que se generan automaticamente. dejo imagenes de el antes y el despues del hover. NOTA: si se puede hacer por LESS mejor.

Antes: introducir la descripción de la imagen aquí

Despues:

introducir la descripción de la imagen aquí

Este es mi codigo en Jquery hasta el momento:

requirejs(['jquery', 'domReady!'], function ($) {
$(document).ready(function () {
    $('.result-thumbnail').hover(function(){
        $('.result-sub-content').css("display", "block");
        $('.result-sub-content').css("transition", "all 1.5 ease");
        }, function(){
        $('.result-sub-content').css("display", "none");
    });
    $('.result-sub-content').hover(function(){
        $('.result-sub-content').css("display", "block");
        $('.result-sub-content').css("transition", "all 1.5 ease");
        });
})
})
0

2 respuestas 2

2

No entiendo la segunda parte. Si al hacer hover sobre .result-thumbnail mostrás .result-sub-content, que sentido tiene volver a mostrarlo cuando hacés hover sobre sí mismo?

Dentro del hover tenés que seleccionar la clase que está dentro del elemento. Para eso poder utilizar .find().

$('.result-thumbnail').hover(function () {
    $(this).find('.result-sub-content').css("display", "block");
    $(this).find('.result-sub-content').css("transition", "all 1.5 ease");
}, function () {
    $(this).find('.result-sub-content').css("display", "none");
});

$('.result-sub-content').hover(function () {
    $(this).css("display", "block");
    $(this).css("transition", "all 1.5 ease");
});

Ahora, sería conveniente que todo esto lo hagas directamente desde CSS:

.result-sub-content {
  display: none;
  transition: all 1.5 ease;
}

.result-thumbnail:hover .result-sub-content {
  display: block;
}

El transition no se a que se lo estarás aplicando, porque a la propiedad display no le podes aplicar una transición.


Estoy adivinando la estructura HTML, deberías publicarla.

1

Para empezar te diría que es mucho más más fácil si lo hicieras con CSS

.result-sub-content:hover .result-sub-content{
    display:block;
     ...
}
1
  • Me a servido tu respuesta, solo que le agregue un ~ de este modo: .result-sub-content:hover ~ .result-sub-content{ display:block; ... } muchas gracias.
    – Artudoxo
    Commented el 7 nov. 2019 a las 21:43

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.