Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] el primer link de varios no tiene hover

 Estas en el tema de el primer link de varios no tiene hover en el foro de CSS en Foros del Web. Hola tengo unos link con efecto hover que me crea un cuadro como los etiquetados de fb, el problema es que solo tienen el hover ...
  #1 (permalink)  
Antiguo 17/12/2014, 08:29
 
Fecha de Ingreso: febrero-2014
Mensajes: 69
Antigüedad: 10 años, 8 meses
Puntos: 0
el primer link de varios no tiene hover
Hola tengo unos link con efecto hover que me crea un cuadro como los etiquetados de fb, el problema es que solo tienen el hover del segundo en adelante, el código es este

Código HTML: 
Ver original
  1. <div class="col-md-9">
  2.                             <div class="corporativo-right">
  3.                                 <p class="text-right">
  4.                                     <img src="<?php echo get_template_directory_uri(); ?>/images/servicios-corporativo.jpg" class="img-responsive">
  5.                                 </p>
  6.                                 <p class="text-left">   
  7.                                     <br>
  8.                                     <span class="desc-corporativo">
  9.                                           <span class="socios-freddy-zometa"><a href="#">•  Freddy Zometa</a><span class="tag-freddy-zometa"></span></span> |
  10.                                           <span class="socios-antonio-mendez"><a href="#">•  Antonio Méndez</a><span class="tag-antonio-mendez"></span></span> |
  11.                                           <span class="socios-giancarlo-silva"><a href="#">•  Giancarlo Silva</a><span class="tag-giancarlo-silva"></span></span> |
  12.                                           <span class="socios-francisco-martinez"><a href="#">•  Francisco Martínez  </a><span class="tag-francisco-martinez"></span></span> |
  13.                                           <span class="socios-edwin-romero"><a href="#">•  Edwin Hernández</a><span class="tag-edwin-romero"></span></span> |
  14.                                           <span class="socios-linda-pleitez"><a href="#">•  Linda Pleitez</a><span class="tag-linda-pleitez"></span></span> |
  15.                                           <span class="socios-camila-villafuerte"><a href="#">•  Camila Villafuerte</a><span class="tag-camila-villafuerte"></span></span> | 
  16.                                           <span class="socios-patricia-orozco"><a href="#">•  Patricia Orozco </a><span class="tag-patricia-orozco"></span></span> |
  17.                                           <span class="socios-feridee-alabi"><a href="#">•  Feridee Hazel Alabi</a><span class="tag-feridee-alabi"></span></span> |
  18.                                           <span class="socios-lorena-villacorte"><a href="#">•  Lorena Villacorta</a><span class="tag-lorena-villacorte"></span></span> |
  19.                                     </span>
  20.                                 </p>
  21.                             </div>
  22.                         </div>
  23.                     </div>

este es el css
Código CSS: 
Ver original
  1. span.socios-freddy-zometa span.tag-freddy-zometa {
  2.         position: absolute;
  3.         border: solid blue 2px;
  4.         width: 60px;
  5.         height: 60px;
  6.         display: none;
  7.         margin-top: -285px;
  8.         margin-left: 397px;
  9.     }
  10.     span.socios-freddy-zometa:hover span.tag-freddy-zometa {
  11.         display: block
  12.     }
  13.     
  14.     span.socios-antonio-mendez span.tag-antonio-mendez {
  15.         position: absolute;
  16.         border: solid blue 2px;
  17.         width: 60px;
  18.         height: 60px;
  19.         display: none;
  20.         margin-top: -305px;
  21.         margin-left: 570px;
  22.     }
  23.     span.socios-antonio-mendez:hover span.tag-antonio-mendez {
  24.         display: block
  25.     }
  26.     
  27.     span.socios-giancarlo-silva span.tag-giancarlo-silva {
  28.         position: absolute;
  29.         border: solid blue 2px;
  30.         width: 60px;
  31.         height: 70px;
  32.         display: none;
  33.         margin-top: -320px;
  34.         margin-left: 102px;
  35.     }
  36.     span.socios-giancarlo-silva:hover span.tag-giancarlo-silva {
  37.         display: block
  38.     }
  39.     
  40.     span.socios-giancarlo-silva span.tag-giancarlo-silva {
  41.         position: absolute;
  42.         border: solid blue 2px;
  43.         width: 60px;
  44.         height: 70px;
  45.         display: none;
  46.         margin-top: -320px;
  47.         margin-left: 102px;
  48.     }
  49.     span.socios-giancarlo-silva:hover span.tag-giancarlo-silva {
  50.         display: block
  51.     }
  52.  
  53.     
  54.     span.socios-francisco-martinez span.tag-francisco-martinez {
  55.         position: absolute;
  56.         border: solid blue 2px;
  57.         width: 60px;
  58.         height: 70px;
  59.         display: none;
  60.         margin-top: -300px;
  61.         margin-left: 702px;
  62.     }
  63.     span.socios-francisco-martinez:hover span.tag-francisco-martinez {
  64.         display: block
  65.     }
  66.     
  67.     span.socios-edwin-romero span.tag-edwin-romero {
  68.         position: absolute;
  69.         border: solid blue 2px;
  70.         width: 60px;
  71.         height: 70px;
  72.         display: none;
  73.         margin-top: -340px;
  74.         margin-left: 225px;
  75.     }
  76.     span.socios-edwin-romero:hover span.tag-edwin-romero {
  77.         display: block
  78.     }
  79.     
  80.     span.socios-linda-pleitez span.tag-linda-pleitez {
  81.         position: absolute;
  82.         border: solid blue 2px;
  83.         width: 60px;
  84.         height: 70px;
  85.         display: none;
  86.         margin-top: -240px;
  87.         margin-left: 515px;
  88.     }
  89.     span.socios-linda-pleitez:hover span.tag-linda-pleitez {
  90.         display: block
  91.     }
  92.     
  93.     span.socios-camila-villafuerte span.tag-camila-villafuerte {
  94.         position: absolute;
  95.         border: solid blue 2px;
  96.         width: 60px;
  97.         height: 70px;
  98.         display: none;
  99.         margin-top: -205px;
  100.         margin-left: 55px;
  101.     }
  102.     span.socios-camila-villafuerte:hover span.tag-camila-villafuerte {
  103.         display: block
  104.     }
  105.     
  106.     span.socios-patricia-orozco span.tag-patricia-orozco {
  107.         position: absolute;
  108.         border: solid blue 2px;
  109.         width: 60px;
  110.         height: 70px;
  111.         display: none;
  112.         margin-top: -220px;
  113.         margin-left: 680px;
  114.     }
  115.     span.socios-patricia-orozco:hover span.tag-patricia-orozco {
  116.         display: block
  117.     }
  118.  
  119.     
  120.     span.socios-feridee-alabi span.tag-feridee-alabi {
  121.         position: absolute;
  122.         border: solid blue 2px;
  123.         width: 60px;
  124.         height: 70px;
  125.         display: none;
  126.         margin-top: -237px;
  127.         margin-left: 245px;
  128.     }
  129.     span.socios-feridee-alabi:hover span.tag-feridee-alabi {
  130.         display: block
  131.     }
  132.  
  133.     
  134.     span.socios-lorena-villacorte span.tag-lorena-villacorte {
  135.         position: absolute;
  136.         border: solid blue 2px;
  137.         width: 60px;
  138.         height: 70px;
  139.         display: none;
  140.         margin-top: -245px;
  141.         margin-left: 390px;
  142.     }
  143.     span.socios-lorena-villacorte:hover span.tag-lorena-villacorte {
  144.         display: block
  145.     }
  #2 (permalink)  
Antiguo 17/12/2014, 08:59
Avatar de Panicav  
Fecha de Ingreso: diciembre-2007
Ubicación: Rosario, Santa Fe - Argentina.
Mensajes: 135
Antigüedad: 16 años, 10 meses
Puntos: 8
Respuesta: el primer link de varios no tiene hover
Si logro entender, creo que el hover lo hace el primero tambien, solo que está fuera de la pantalla por eso no lo ves, igual esta algo enrredado el cod te diria...

te recomendaria usar listas quizas algo así.

Código CSS: 
Ver original
  1. .lista ul
  2. {
  3.    padding-right: 0px;
  4.    padding-left: 0px;
  5.    padding-bottom: 0px;
  6.    padding-top: 0px;
  7.    margin: 0px;
  8. }
  9.  
  10. .lista li
  11. {
  12.    list-style-type: none;
  13.    display: inline;
  14.    padding-right: 5px;
  15. }
  16. .lista li:hover { background-color: red; }

Código HTML: 
Ver original
  1. <div class="lista">
  2.    <ul>
  3.       <li>Item1</li>
  4.       <li>Item2</li>
  5.       <li>Item3</li>
  6.       <li>Item4</li>
  7.    </ul>
  8. </div>

Logicamente lo llevas al estilo que necesites.
Última edición por Panicav; 17/12/2014 a las 09:08 Razón: mejora en la respuesta
  #3 (permalink)  
Antiguo 17/12/2014, 09:15
 
Fecha de Ingreso: febrero-2014
Mensajes: 69
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: el primer link de varios no tiene hover
es que lo que no entiendo es que antes funcionaba bien, y de repente no se que moví y pum!!! el primero dejo de funcionar.

aqui esta el html un poco mejor ordenado

Código HTML: 
Ver original
  1. <div class="col-md-9">
  2.                             <div class="corporativo-right">
  3.                                 <p class="text-right">
  4.                                     <img src="<?php echo get_template_directory_uri(); ?>/images/servicios-corporativo.jpg" class="img-responsive">
  5.                                 </p>
  6.                                 <p class="text-left">   
  7.                                     <br>
  8.                                     <span class="desc-corporativo">
  9.                                           <span class="socios-freddy-zometa">
  10.                                               <a href="#">•  Freddy Zometa</a>
  11.                                               <span class="tag-freddy-zometa"></span>
  12.                                           </span> |
  13.                                           <span class="socios-antonio-mendez">
  14.                                               <a href="#">•  Antonio Méndez</a>
  15.                                               <span class="tag-antonio-mendez"></span>
  16.                                           </span> |
  17.                                           <span class="socios-giancarlo-silva">
  18.                                               <a href="#">•  Giancarlo Silva</a>
  19.                                               <span class="tag-giancarlo-silva"></span>
  20.                                           </span> |
  21.                                           <span class="socios-francisco-martinez">
  22.                                               <a href="#">•  Francisco Martínez  </a>
  23.                                               <span class="tag-francisco-martinez"></span>
  24.                                           </span> |
  25.                                           <span class="socios-edwin-romero">
  26.                                               <a href="#">•  Edwin Hernández</a>
  27.                                               <span class="tag-edwin-romero"></span>
  28.                                           </span> |
  29.                                           <span class="socios-linda-pleitez">
  30.                                               <a href="#">•  Linda Pleitez</a>
  31.                                               <span class="tag-linda-pleitez"></span>
  32.                                           </span> |
  33.                                           <span class="socios-camila-villafuerte">
  34.                                               <a href="#">•  Camila Villafuerte</a>
  35.                                               <span class="tag-camila-villafuerte"></span>
  36.                                           </span> | 
  37.                                           <span class="socios-patricia-orozco">
  38.                                               <a href="#">•  Patricia Orozco </a>
  39.                                               <span class="tag-patricia-orozco"></span>
  40.                                           </span> |
  41.                                           <span class="socios-feridee-alabi">
  42.                                               <a href="#">•  Feridee Hazel Alabi</a>
  43.                                               <span class="tag-feridee-alabi"></span>
  44.                                           </span> |
  45.                                           <span class="socios-lorena-villacorte">
  46.                                               <a href="#">•  Lorena Villacorta</a>
  47.                                               <span class="tag-lorena-villacorte"></span>
  48.                                           </span> |
  49.                                     </span>
  50.                                 </p>
  51.                             </div>
  52.                         </div>
  53.                     </div>
  #4 (permalink)  
Antiguo 17/12/2014, 10:22
 
Fecha de Ingreso: febrero-2014
Mensajes: 69
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: el primer link de varios no tiene hover
Revisando con las herramientas del navegador me d cuenta de esto, el navegador me imprime de esta forma el primer elemento

Código HTML: 
Ver original
  1. <a>
  2.                                           <span class="socios-freddy-zometa">
  3.                                               </span></a><a href="#">•  Freddy Zometa</a>
  4.                                               <span class="tag-freddy-zometa"></span>
  5.                                            |

cuando debería ser así:
Código HTML: 
Ver original
  1. <span class="socios-freddy-zometa">
  2.                                               <a href="#">•  Freddy Zometa</a>
  3.                                               <span class="tag-freddy-zometa"></span>
  4.                                           </span> |
  #5 (permalink)  
Antiguo 17/12/2014, 10:25
 
Fecha de Ingreso: febrero-2014
Mensajes: 69
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: el primer link de varios no tiene hover
Descubri el problema!!! era una etiqueta "a" que no tenia cierre, gracias!!!

Etiquetas: hover, link, php, primer, responsive, 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


« Tema Anterior | Próximo Tema »


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