4

Tengo botones de redes sociales que al hacer hover se despliega el nombre por debajo, pero cuando se pasa el mouse por el borde de cada ícono, el nombre por de abajo vibra.

Creo que es un problema con el hover pero no sé cómo hacer que esto no suceda.

Aquí mi código (procedente de CodePen):

body {
  text-align: center;
  padding-top: 0;
}

.iconos {
  margin-top: 0px;
  padding-top: 0px;
}

a {
  background: #d2d7d3;
  color: #222;
  border-radius: 100%;
  display: inline-block;
  text-decoration: none;
  position: relative;
  width: 40px;
  height: 28px;
  margin: 0 2px;
  padding-top: 12px;
  -webkit-transition: all .5s;
  -moz-webkit-transition: all .5s;
  transition: all .5s;
}


/* Hijo pero su padre no está declarado */

a.icon:before {
  font-family: "FontAwesome", sans-serif;
  color: #fff;
  font-size: 20px;
}


/* Hijs sin  padre declarado */


/* facebook */

a.facebook:before {
  content: '\f09a'
}


/* Twitter */

a.twitter:before {
  content: "\f099";
}


/* instagram */

a.instagram:before {
  content: "\f16d";
}


/* Youtube */

a.youtube:before {
  content: "\f16a";
}


/* Padre */

a span {
  font-family: "Helvecita", "Arial";
  background: #dddd;
  /* #fff; */
  color: #222;
  font-size: 14px;
  font-weight: bold;
  position: absolute;
  top: 0px;
  /*bottom:0px; */
  left: -25px;
  right: -25px;
  padding: 5px 7px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
}


/* Pseudoelemento de a span */


/* flechita de arriba */

a span:before {
  content: '';
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #dddd;
  /*border-top: 5px solid #fff;*/
  position: absolute;
  bottom: 26px;
  /*bottom:-5px; */
  left: 40px;
}

a:hover span {
  top: 50px;
  /* bottom:50px; */
  visibility: visible;
  opacity: 1;
}


/* Hover através de los iconos, icono x icono */


/* facebook */

a.facebook:hover {
  background-color: #4183d7;
  color: #bfbfbf;
}

a.facebook span {
  color: #4183d7;
}


/* twitter */

a.twitter:hover {
  background-color: #1da1f2;
  color: #bfbfbf;
}

a.twitter span {
  color: #1da1f2;
}


/* instagram */

a.instagram:hover {
  background-color: #e1306c;
  color: #bfbfbf;
}

a.instagram span {
  color: #e1306c;
}


/* Youtube */

a.youtube:hover {
  background-color: red;
  color: #bfbfbf;
}

a.youtube span {
  color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<h1>Redes Sociales</h1>

<div class="iconos">
  <a href="http://facebook.com" class="icon facebook">
    <span class="clase face">Facebook</span></a>

  <a href="http://twitter.com" class="icon twitter">
    <span class="clase twitter">Twitter</span></a>

  <a href="http://instagram.com" class="icon instagram">
    <span class="clase instagram">Instagram</span></a>

  <a href="http://youtube.com" class="icon youtube">
    <span class="clase youtube">Youtube</span></a>
</div>

2
  • 2
    No entendí tu pregunta, a que te refieres con vibra? yo veo el ejemplo y lo veo bien, también deberías de pasar el código de ese codepen al snippet de StackOverflow el 14 sep. 2019 a las 20:29
  • Ok, gracias por contestar. Te expico, al momento de pasar el mouse por el lado hace una vibración. Ahora subire el css el 14 sep. 2019 a las 21:01

1 respuesta 1

5

El problema, como indicas en la pregunta, es con el hover: cuando pasas el ratón por encima del enlace se muestra el nombre de la red social y al salir el ratón, este nombre se oculta... Pero al ocultarse, el span a veces pasa por debajo del ratón, lo que hace que se dispare la animación que muestra el texto, luego la de esconder, luego la de mostrar... y esa es la vibración que se ve.

Para resolver el problema una opción sería hacer que el span no le afecte el ratón. Esto se puede lograr usando pointer-events: none. pointer-events le dice al navegador en qué circunstancias debe pasar los eventos del ratón a ese elemento.

Aquí puedes ver una demo funcionando:

body {
  text-align: center;
  padding-top: 0;
}

.iconos {
  margin-top: 0px;
  padding-top: 0px;
}

a {
  background: #d2d7d3;
  color: #222;
  border-radius: 100%;
  display: inline-block;
  text-decoration: none;
  position: relative;
  width: 40px;
  height: 28px;
  margin: 0 2px;
  padding-top: 12px;
  -webkit-transition: all .5s;
  -moz-webkit-transition: all .5s;
  transition: all .5s;
}


/* Hijo pero su padre no está declarado */

a.icon:before {
  font-family: "FontAwesome", sans-serif;
  color: #fff;
  font-size: 20px;
}


/* Hijs sin  padre declarado */


/* facebook */

a.facebook:before {
  content: '\f09a'
}


/* Twitter */

a.twitter:before {
  content: "\f099";
}


/* instagram */

a.instagram:before {
  content: "\f16d";
}


/* Youtube */

a.youtube:before {
  content: "\f16a";
}


/* Padre */

a span {
  font-family: "Helvecita", "Arial";
  background: #dddd;
  /* #fff; */
  color: #222;
  font-size: 14px;
  font-weight: bold;
  position: absolute;
  top: 0px;
  /*bottom:0px; */
  left: -25px;
  right: -25px;
  padding: 5px 7px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
  pointer-events: none;
}



/* Pseudoelemento de a span */


/* flechita de arriba */

a span:before {
  content: '';
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #dddd;
  /*border-top: 5px solid #fff;*/
  position: absolute;
  bottom: 26px;
  /*bottom:-5px; */
  left: 40px;
}

a:hover span {
  top: 50px;
  /* bottom:50px; */
  visibility: visible;
  opacity: 1;
}


/* Hover através de los iconos, icono x icono */


/* facebook */

a.facebook:hover {
  background-color: #4183d7;
  color: #bfbfbf;
}

a.facebook span {
  color: #4183d7;
}


/* twitter */

a.twitter:hover {
  background-color: #1da1f2;
  color: #bfbfbf;
}

a.twitter span {
  color: #1da1f2;
}


/* instagram */

a.instagram:hover {
  background-color: #e1306c;
  color: #bfbfbf;
}

a.instagram span {
  color: #e1306c;
}


/* Youtube */

a.youtube:hover {
  background-color: red;
  color: #bfbfbf;
}

a.youtube span {
  color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<h1>Redes Sociales</h1>

<div class="iconos">
  <a href="http://facebook.com" class="icon facebook">
    <span class="clase face">Facebook</span>
  </a>

  <a href="http://twitter.com" class="icon twitter">
    <span class="clase twitter">Twitter</span>
  </a>

  <a href="http://instagram.com" class="icon instagram">
    <span class="clase instagram">Instagram</span>
  </a>

  <a href="http://youtube.com" class="icon youtube">
    <span class="clase youtube">Youtube</span>
  </a>
</div>

Un problema de esta solución es que ahora el span no hace nada ni se puede activar. Una opción para evitar esto sería hacer que el span sí tenga eventos de ratón cuando el ratón está encima del enlace.

Para ello, puedes hacer esto (aunque los resultados pueden todavía no ser los esperados):

body {
  text-align: center;
  padding-top: 0;
}

.iconos {
  margin-top: 0px;
  padding-top: 0px;
}

a {
  background: #d2d7d3;
  color: #222;
  border-radius: 100%;
  display: inline-block;
  text-decoration: none;
  position: relative;
  width: 40px;
  height: 28px;
  margin: 0 2px;
  padding-top: 12px;
  -webkit-transition: all .5s;
  -moz-webkit-transition: all .5s;
  transition: all .5s;
}


/* Hijo pero su padre no está declarado */

a.icon:before {
  font-family: "FontAwesome", sans-serif;
  color: #fff;
  font-size: 20px;
}


/* Hijs sin  padre declarado */


/* facebook */

a.facebook:before {
  content: '\f09a'
}


/* Twitter */

a.twitter:before {
  content: "\f099";
}


/* instagram */

a.instagram:before {
  content: "\f16d";
}


/* Youtube */

a.youtube:before {
  content: "\f16a";
}


/* Padre */

a span {
  font-family: "Helvecita", "Arial";
  background: #dddd;
  /* #fff; */
  color: #222;
  font-size: 14px;
  font-weight: bold;
  position: absolute;
  top: 0px;
  /*bottom:0px; */
  left: -25px;
  right: -25px;
  padding: 5px 7px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
  pointer-events: none;
}

a:hover span {
  pointer-events: auto;
}


/* Pseudoelemento de a span */


/* flechita de arriba */

a span:before {
  content: '';
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #dddd;
  /*border-top: 5px solid #fff;*/
  position: absolute;
  bottom: 26px;
  /*bottom:-5px; */
  left: 40px;
}

a:hover span {
  top: 50px;
  /* bottom:50px; */
  visibility: visible;
  opacity: 1;
}


/* Hover através de los iconos, icono x icono */


/* facebook */

a.facebook:hover {
  background-color: #4183d7;
  color: #bfbfbf;
}

a.facebook span {
  color: #4183d7;
}


/* twitter */

a.twitter:hover {
  background-color: #1da1f2;
  color: #bfbfbf;
}

a.twitter span {
  color: #1da1f2;
}


/* instagram */

a.instagram:hover {
  background-color: #e1306c;
  color: #bfbfbf;
}

a.instagram span {
  color: #e1306c;
}


/* Youtube */

a.youtube:hover {
  background-color: red;
  color: #bfbfbf;
}

a.youtube span {
  color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<h1>Redes Sociales</h1>

<div class="iconos">
  <a href="http://facebook.com" class="icon facebook">
    <span class="clase face">Facebook</span>
  </a>

  <a href="http://twitter.com" class="icon twitter">
    <span class="clase twitter">Twitter</span>
  </a>

  <a href="http://instagram.com" class="icon instagram">
    <span class="clase instagram">Instagram</span>
  </a>

  <a href="http://youtube.com" class="icon youtube">
    <span class="clase youtube">Youtube</span>
  </a>
</div>

3
  • Disculpa a qué te refiees con que no se puede activar?, porque probe con tu primera indicacion y todo me resulto bien. el 14 sep. 2019 a las 21:28
  • Me refiero a que el texto que dice Facebook no se puede pulsar porque desaparece en cuanto sales del círculo del icono. En la segunda opción si te mueves hacia abajo puedes ponerte encima del texto y pulsar sobre el mismo.
    – Alvaro Montoro
    el 14 sep. 2019 a las 21:32
  • Entendí, muchas gracias. el 14 sep. 2019 a las 21:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.