Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/01/2015, 07:20
juandedios
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 967
Antigüedad: 21 años, 6 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.