1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda Como realizar un hover por selección

Tema en 'Jquery' comenzado por ShiraMaster, 8 de Septiembre de 2016.

  1. ShiraMaster

    ShiraMaster Miembro Activo

    Se incorporó:
    6 de Febrero de 2016
    Mensajes:
    183
    Me gusta recibidos:
    54
    Puntos de trofeos:
    28
    Género:
    Hombre
    Ocupación:
    Diseño web
    Localización:
    Venezuela - Barinas
    Página web:
    Me gustaría realizar un efecto hover con jquery pero con selección, estoy realizando un efecto que al tener el mouse arriba de una imagen se mostrará un párrafo, pero el problema que tengo es que por ejemplo tengo una card (tarjeta), que contiene todo el contenido. entonces al dar click a cualquiera imagen se muestra todo el contenido que tengo oculto, y lo que quiero realizar es que al dar click en una imagen solo salga el respectivo contenido de esa card.

    Click para ver el problema

    Sería genial que me ayudarán.
     
  2. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.023
    Me gusta recibidos:
    419
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    A Dawud le gusta esto.
  3. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    337
    Me gusta recibidos:
    251
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Con el buen ejemplo AngelKrak puedes realizar el efecto hover..... Para realizar al dar click a una tarjeta puedes guiarte del siguiente ejemplo...

    muestra efecto hover ademas y tarjetas de contenidos que al dar click a cualquier información, muestra solo el seleccionado...!!

    http://codepen.io/Dawud89/pen/kkYbBq?editors=0010

    Espero que te sirva...
     
    A AngelKrak le gusta esto.
  4. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    337
    Me gusta recibidos:
    251
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Que onda AngelKrat.. usaste una función closest(); en que beneficia en la ejecución, no lo había visto hasta ahora :D... En sí para que sirve??
     
  5. V!RUS

    V!RUS Nuevo Miembro

    Se incorporó:
    10 de Enero de 2015
    Mensajes:
    20
    Me gusta recibidos:
    9
    Puntos de trofeos:
    3
    Género:
    Hombre
  6. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    497
    Me gusta recibidos:
    303
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    Última modificación: 9 de Septiembre de 2016
    A AngelKrak le gusta esto.
  7. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.023
    Me gusta recibidos:
    419
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    segun mi respuesta(lo que yo se)
    es asi:
    Código (Javascript):
    $(this).closest(elemento).find(elemento);
    primero seleccionamos el elemento que se clickeo con el this, despues en ese mismo elemento se podria decir que nos vamos al index(El contenedor) y mediante find, buscamos el selector para la Propiedad que queramos agregar o eliminar.
     
    A Dawud le gusta esto.
  8. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    337
    Me gusta recibidos:
    251
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco

    Ok ..!! la referencia this y find se como funciona... era el metodo closest... ya lo investigue, en una parte de lo que dices es que busca un elemento antepasado, en el cual closest comienza con el elemento actual a buscar viajando por el árbol DOM hasta encontrar y devolver el primer (individual) que coincide con la expresión pasada.

    Aquí un ejemplo de w3school

    http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_traversing_closest
     
    A AngelKrak le gusta esto.
  9. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.023
    Me gusta recibidos:
    419
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    exacto, es como para ir hacia un elemento dentro del mismo seleccionado...
     
  10. ShiraMaster

    ShiraMaster Miembro Activo

    Se incorporó:
    6 de Febrero de 2016
    Mensajes:
    183
    Me gusta recibidos:
    54
    Puntos de trofeos:
    28
    Género:
    Hombre
    Ocupación:
    Diseño web
    Localización:
    Venezuela - Barinas
    Página web:
    Gracias, por sus hermosas respuestas lo logré con css puro y sass pero con jquery me parece mejor ya que puedo agregar una mejor animación un abrazo para todos.

    - Ayudar es vivir.
     

Comparte esta página