Foros del Web » Programando para Internet » Jquery »

Mostrar descripcion al pasar el mouse por la imagen

Estas en el tema de Mostrar descripcion al pasar el mouse por la imagen en el foro de Jquery en Foros del Web. Hola, quizás esto es algo trillado, pero no me sale como quiero. La idea es que cada vez que se pase el mouse sobre la ...
  #1 (permalink)  
Antiguo 27/01/2015, 07:20
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 967
Antigüedad: 20 años, 10 meses
Puntos: 8
Mostrar descripcion al pasar el mouse por la imagen

Hola, quizás esto es algo trillado, pero no me sale como quiero. La idea es que cada vez que se pase el mouse sobre la imagen se muestre la descripcion encima de esta. Sólo me funciona una vez, cuando quiero pasar el mouse por segunda vez sobre la imagen ya no sale nada. Quizás estoy haciendo algo mal o me falta algo, les paso el código.
Código HTML:
Ver original
  1. <div id="box-important" class="row">
  2.     <div class="col-md-4 col-sm-12">
  3.         <div class="element">
  4.             <a class="image" href="#" style="position:relative">
  5.                <div class="contenthover">Texto de muestra 1</div>
  6.                <img src="<?php echo base_url(); ?>images/important/important1.jpg" alt="Important 1" class="img-responsive">
  7.             </a>
  8.         </div>
  9.     </div>
  10.  
  11.     <div class="col-md-4 col-sm-12">
  12.         <div class="element">
  13.             <a class="image" href="#" style="position:relative">
  14.                <div class="contenthover">Texto de muestra 1</div>
  15.                <img src="<?php echo base_url(); ?>images/important/important2.jpg" alt="Important 2" class="img-responsive">
  16.             </a>
  17.         </div>
  18.     </div>
  19.  
  20.     <div class="col-md-4 col-sm-12">
  21.         <div class="element">
  22.             <a class="image" href="#" style="position:relative">
  23.                <div class="contenthover">Texto de muestra 1</div>
  24.                <img src="<?php echo base_url(); ?>images/important/important3.jpg" alt="Important 3" class="img-responsive">
  25.             </a>
  26.         </div>
  27.     </div>
  28. </div>
Código CSS:
Ver original
  1. #box-important .element {
  2.     background: none repeat scroll 0 0 #222;
  3.     padding: 5px;
  4.     width: 100%;
  5.     height: 100%;
  6. }
  7.  
  8. #box-important a.image {
  9.     display: block;
  10.     overflow: hidden;
  11. }
  12.  
  13. #box-important .contenthover {
  14.     width:100%;
  15.     height:100%;
  16.     background-color: #000;
  17.     opacity:0.7;
  18.     position:absolute;
  19.     top:100%;
  20.     left:0px;
  21.     color:#FFF;
  22.     font-size:22px;
  23.     text-align:center;
  24.     padding-top:40px;
  25. }
Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     $('.image').hover(function(){
  3.         $(this).find('.contenthover').stop().animate({top:'0px'}, 500);
  4.     },
  5.     function() {
  6.         $(this).find('.contenthover').stop().animate({top:'100%'}, 500);
  7.     });
  8. });
Como verán en el html, la imagen está dentro de una etiqueta "a" y en el jquery la descripción se muestra al pasar el mouse por la etiqueta "a".

Cuando paso por primera vez, la manito que sale cuando se pasa por en enlace aparece en toda el área de la imagen, pero al pasar por segunda, tercera y etc vez la manito sale de la mitad de la imagen para abajo y sólo por ahi se puede desplegar la descripción.

Espero que me puedan ayudar.

Gracias.
__________________
El aprendiz.
  #2 (permalink)  
Antiguo 27/01/2015, 07:47
(Desactivado)
 
Fecha de Ingreso: abril-2013
Ubicación: rosario
Mensajes: 248
Antigüedad: 10 años, 10 meses
Puntos: 17
Respuesta: Mostrar descripcion al pasar el mouse por la imagen

Me parece que tenes un problema de estilos , yo le quite el padding-top 40px y funciona bien.
  #3 (permalink)  
Antiguo 27/01/2015, 08:43
 
Fecha de Ingreso: octubre-2014
Ubicación: Buenos Aires
Mensajes: 278
Antigüedad: 9 años, 5 meses
Puntos: 12
Respuesta: Mostrar descripcion al pasar el mouse por la imagen

Hola juandedios, también probé el código y funciona ok sacando el padding-top: 40px; como dice diurno10.

Saludos.
__________________
http://www.sp-vision.net
  #4 (permalink)  
Antiguo 27/01/2015, 22:43
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 967
Antigüedad: 20 años, 10 meses
Puntos: 8
Respuesta: Mostrar descripcion al pasar el mouse por la imagen

Que raro, se lo quite y sigue funcionando igual. Es un dolor de cabeza.
__________________
El aprendiz.
  #5 (permalink)  
Antiguo 28/01/2015, 08:12
(Desactivado)
 
Fecha de Ingreso: abril-2013
Ubicación: rosario
Mensajes: 248
Antigüedad: 10 años, 10 meses
Puntos: 17
Respuesta: Mostrar descripcion al pasar el mouse por la imagen

limpiaste cache?
  #6 (permalink)  
Antiguo 28/01/2015, 09:59
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 967
Antigüedad: 20 años, 10 meses
Puntos: 8
Respuesta: Mostrar descripcion al pasar el mouse por la imagen

Si limpie cache y ahora si funciona por 2 veces, a la tercera vez que quiero pasar el mouse solo funciona de la mitad de la imagen para abajo.

No tendrá que ver que estoy poniendo las dimensiones en porcentaje? width: 100%; height: 100%;
__________________
El aprendiz.
  #7 (permalink)  
Antiguo 29/01/2015, 07:20
(Desactivado)
 
Fecha de Ingreso: abril-2013
Ubicación: rosario
Mensajes: 248
Antigüedad: 10 años, 10 meses
Puntos: 17
Respuesta: Mostrar descripcion al pasar el mouse por la imagen

No che, a mi me funciona siempre, en que navegador lo estas probando?

Etiquetas: descripcion, mouse
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 11:45.