entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

0voto

como hacer este tipo de hover con jquery ?

preguntó Ago 31, 2013
Web
1279 Vistas
1 Respuestas
abierta

Hola comunidad buenas noches,
quisiera saber si me pueden ayudar con esto que tengo que hacer, es lo siguiente:

Al hacer hover en el link de información se tiene que ejecutar el mismo efecto que cuando le pasas el hover a la imagen y ademas el titulo de cada uno tiene que cambiar de color,

hasta el momento llevo esto pero quiero que se ejecute en el objeto que le hago hover no en todos se que se realiza con (this) pero no se como implementarlo en este caso

http://jsfiddle.net/kiokotzu/Aebhh/

de ante mano muchas gracias

preguntado por kiokotzu (1.960 puntos) Ago 31, 2013 en Web

1 Respuesta

1voto

Gustavo Puntos1350

Usa atributos data en las etiquetas que quieres que haga el efecto, algo así
http://jsfiddle.net/gustavofernandez/Aebhh/4/

... Veo que el efecto al comienzo no va igual que los demás, no se si es lo que quieres pero sino es eso, entonces es porque debes especificarle que el .hover empiece con margin-top: -125px

respondido por Gustavo (1.350 puntos) Ago 31, 2013

0voto

kiokotzu comentado Ago 31, 2013

hola gracias por tu ayuda, pero tengo una pregunta mas, si los <article> son ADMINISTRABLES y pueden agregar los que deseen como empleo el atributo data ya que veo que le asignas un ID a las imágenes que quieres afectar ??

comentado por kiokotzu (1.960 puntos) Ago 31, 2013

1voto

Gustavo comentado Sep 1, 2013

el atributo data-prueba que puse en los enlaces lo obtienes con jquery de la forma:
$("selector").data("prueba"); o también con attr $("selector").attr("data-prueba"), puedes usarlo en los elementos que desees.
En este caso lo uso para "enlazar" el hover de el enlace con el id del div que le haces el hover, como veras en el evento hover obtengo el valor del atributo, le añado un "#" al inicio y el selector por ejemplo para el enlace que tiene data-prueba="imagen1" daría algo así "#imagen1", así tengo el id del elemento al que quiero hacerle el hover, y simplemente hago la animación.