Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema con href en hover con javascript

Estas en el tema de Problema con href en hover con javascript en el foro de CSS en Foros del Web. Hola buenas tardes, tengo el siguiente problema, de la siguiente pagina http://geekgirllife.com/place-text-o...ut-javascript/ , la utilice para para que cuando paso el mouse por encima de ...
  #1 (permalink)  
Antiguo 03/01/2015, 18:08
 
Fecha de Ingreso: octubre-2014
Mensajes: 70
Antigüedad: 9 años, 4 meses
Puntos: 0
Pregunta Problema con href en hover con javascript

Hola buenas tardes, tengo el siguiente problema, de la siguiente pagina http://geekgirllife.com/place-text-o...ut-javascript/, la utilice para para que cuando paso el mouse por encima de la imagen aparezca un texto, y me redireccione a un link, el tema es que esta corrido jaja, me aparece tengo 9 imagenes dividas en 3 colunas y 3 filas y la primera imagen no aparece el link, pero en la 2da imagen me aparece el link de la primera imagen, les dejare el codigo html ( php ) y el codigo css ( utilice masonry para ordenar las imagenes)
Código:
 <div class="item">	
        <ul class="img-list">
  <li>

    <table width="100" border="0" align=""  style="border:hidden;">
      <tr>
        <p width="15%" rowspan="5"><img class="img" img src="<?php   echo  $post['imagen'] ; ?>" width="150" height="150" /></p>
      </a>
	   <span class="text-content"><span><?php   echo  $post['nombre'] ; ?>
	         <?php echo '<a href="'.$post['direccion'].'">';?>

	   </span></span>
      </tr>
      <tr>
        <td></td>
       
      </tr>
    </table><div style="clear:both"></div> 
              </div>

    <?php } ?>
    <style type="text/css"> 
	$(document).ready(function(){
	$('#contenedor').masonry();
});
</style>
Código:
/* Masonry*/
	.item {
  width: 200px;
  margin: 5px;
  float: left;
}
ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
 
ul.img-list li {
  display: inline-block;
  height: 200px;
  margin: 0 1em 1em 0;
  position: relative;
  width: 200px;
}
span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
}
 
span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
  opacity: 0;
}
 
ul.img-list li:hover span.text-content {
  opacity: 1;
}span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 15px;
  width: 200px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
}
 li { 
 margin:0 auto;
float: left;

  padding: 0 4px; 
}

Etiquetas: background, color, hover, href, html, javascript, php, width
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 21:48.