Question:
I have social network buttons that when hovering the name below is displayed, but when the mouse is passed over the edge of each icon, the name below vibrates.
I think it's a problem with the hover but I don't know how to make this not happen.
Here my code ( sourced from 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 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>Answer:
The problem, as you indicate in the question, is with the hover: when you move the mouse over the link, the name of the social network is shown and when you leave the mouse, this name is hidden… But when it is hidden, the span a Sometimes it goes under the mouse, which causes the animation that shows the text to be triggered, then the one to hide, then the one to show… and that is the vibration that you see.
To solve the problem, one option would be to make the span not affect the mouse. This can be achieved using pointer-events: none .pointer-events tells the browser under what circumstances it should pass mouse events to that element.
Here you can see a working demo:
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 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>One problem with this solution is that now the span doesn't do anything and can't be activated. One option to avoid this would be to make the span itself have mouse events when the mouse is over the link.
To do this, you can do this (although the results may still not be as expected):
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 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>