Foros del Web » Programando para Internet » Javascript »

Hover dinamico

Estas en el tema de Hover dinamico en el foro de Javascript en Foros del Web. No se si éste es el foro correcto, yo he probado a hacer lo que quiero con css, js, de todo... Y ya no se ...
  #1 (permalink)  
Antiguo 11/05/2011, 05:26
Avatar de elainemarley85  
Fecha de Ingreso: abril-2011
Mensajes: 11
Antigüedad: 12 años, 11 meses
Puntos: 0
Hover dinamico

No se si éste es el foro correcto, yo he probado a hacer lo que quiero con css, js, de todo... Y ya no se por donde tirar.

A ver, se trata de una web que tiene una cuadricula de imagenes, cada una con una segunda imagen que debe ponerse encima al hacer hover. El caso es que todas estas imagenes vienen de la base de datos de manera que no puedo asignar las rutas de las imagenes en la hoja de estilos (que sería lo ideal).

Tengo el siguiente código:

Código Javascript:
Ver original
  1. <ul id="items">
  2. <?  while($row=mysql_fetch_object($res))
  3.     {  
  4.     echo'<li data-id="id-'.$row->id.'" class="'.$row->id.'">
  5.             <a href="detalle_index.php?id='.$row->id.'" style="background-image:url(\'img/portfolio/'.$row->fotothumb.'\');" onMouseOver="this.style.background=\'img/portfolio/'.$row->fotothumbhover.'\'" ></a>  
  6.         </li>';
  7.     }
  8. ?>
  9. </ul>

Con mi css

Código CSS:
Ver original
  1. #photos-list a{display: block;  width:168px; height: 168px;}

Pero nada. Sale la imagen y no sale la que tiene que salir on hover. No puedo cambiar el markup del html porque luego tengo un script que me ordena la cuadricula de imagenes según una serie de filtros y es así como tiene que ir.
  #2 (permalink)  
Antiguo 11/05/2011, 09:10
 
Fecha de Ingreso: mayo-2011
Ubicación: Madrid
Mensajes: 7
Antigüedad: 12 años, 10 meses
Puntos: 1
Respuesta: Hover dinamico

hola
Se me ocurre que un hover en un css no se da con la etiqueta a {}
sino con a link .... no sé si te soy de ayuda
  #3 (permalink)  
Antiguo 11/05/2011, 09:26
Avatar de Aijoona
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 12 años, 10 meses
Puntos: 343
Respuesta: Hover dinamico

Así rápido y sucio:

http://blog.aijoona.com/wp-content/uploads/2011/05/index.html
__________________
blog | @aijoona
  #4 (permalink)  
Antiguo 12/05/2011, 02:44
Avatar de elainemarley85  
Fecha de Ingreso: abril-2011
Mensajes: 11
Antigüedad: 12 años, 11 meses
Puntos: 0
Respuesta: Hover dinamico

Muchas gracias por tu solución. Parece que estoy en un buen problema porque no me funciona esto. Estoy usando el plugin quicksand de jquery en la web y las imagenes a las que quiero hacerle el hover son las que mueve dicho plugin.

Parece que hace copias de las imagenes y una vez utilizas el plugin no te vuelve a animar el hover sobre ellas.

He cambiado un poco el markup después de darle muchas vueltas y ahora tengo lo siguiente:

Código PHP:
Ver original
  1. <li class="item" data-id="id-'.$row->id.'" data-type="'.$ro.'">
  2.                             <a href="detalle_index.php?id='.$row->id.'" alt="">
  3.                                 <img src="img/portfolio/'.$row->fotothumb.'" alt="" class="on"></img>
  4.                                 <img src="img/portfolio/'.$row->fotothumbhover.'" alt="" class="over"></img>
  5.                             </a>
  6.                         </li>

Y en mi script:

Código Javascript:
Ver original
  1. $("img.on").live({
  2.         mouseenter:
  3.             function() {
  4.             $(this).stop().animate({"opacity": "0"}, "slow");
  5.             },
  6.         mouseleave:
  7.             function() {
  8.             $(this).stop().animate({"opacity": "1"}, "slow");
  9.             }
  10.         }
  11.     );
  12.     $("img.over").live({
  13.         mouseenter:
  14.             function() {
  15.             $(this).stop().animate({"opacity": "1"}, "slow");
  16.             },
  17.         mouseleave:
  18.             function() {
  19.             $(this).stop().animate({"opacity": "0"}, "slow");
  20.             }
  21.         }
  22.     );

Esto lo hace funcionar aún después de la animación del filtrado del plugin de quicksand pero sólo me funciona bien en firefox. IE8 se ralla y te deja la imagen en hover activa desde el principio y luego cuando le da la gana vuelve a funcionar bien. Cambiando mouseenter por mouseover y mouseleave por mouseout la cosa no mejora.

EDIT: Nada, parece que ahora a IE le ha dado por funcionar. Muchas gracias por vuestra ayuda de todas maneras. He aprendido un montón chocandome contra esta página ^^

Última edición por elainemarley85; 12/05/2011 a las 04:03

Etiquetas: dinamico, hover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:53.