Здравствуйте! Делаю блок с социалками, при наведении на ту или иную иконку должен появляться блочёк с некой информацией. Проблема в том, что при mouseover/mouseout
происходит какое-то мерцание добавляемого по наведению элемента. Причем такой эффект наблюдается у всех кнопок кроме fb, если курсор пересекает правую границу иконки.
Почему и как решить, подскажите пожалуйста. Песочница.
$(document).ready(function() {
var socialBtnsBlock = $('.social-buttons');
var socialBtn = $('.social-buttons .btn');
var toggleBlock = $('.social-buttons .toggle-item');
var ta_begin = '<span class="toggle-item">';
var ta_end = '</span>';
socialBtn.on('mouseover', function() {
var currentSocialBtn = $(this);
var currentValue = currentSocialBtn.attr('data-value');
$('.toggle-item').remove();
currentSocialBtn.after(ta_begin+currentValue+ta_end);
$('.toggle-item').css('display', 'inline-block');
});
socialBtn.on('mouseout', function() {
$('.toggle-item').remove();
});
})
.social-buttons {
list-style: none;
margin: 15px 0;
padding: 0;
font-size: 0;
}
.social-buttons .social-item {
display: inline-block;
margin-right: 10px;
}
.social-buttons .social-item:last-child {
margin-right: 0;
}
.social-buttons .btn {
position: relative;
padding: 0;
font-size: 30px;
line-height: 1em;
cursor: pointer;
box-shadow: none;
outline: none;
}
.social-buttons .btn i {
margin-right: 0;
}
.social-buttons .facebook-btn {
color: #3b5998;
}
.social-buttons .twitter-btn {
color: #00b6f1;
}
.social-buttons .google-plus-btn {
color: #da5333;
}
.social-buttons .pinterest-btn {
color: #bb232c;
}
.social-buttons .stumbleupon-btn {
display: inline-block;
height: 26px;
padding: 0 2px;
line-height: 24px;
font-size: 18px;
background: #f15a24;
border-radius: 4px;
color: #fff;
}
/* toggle item */
.social-buttons .toggle-item {
position: relative;
top: 1px; left: 0px;
display: none;
height: 27px;
margin-right: 3px;
padding: 0 5px;
border-radius: 4px;
background: #f9f9f9;
border: 1px solid #ccc;
font-size: 14px;
line-height: 26px;
vertical-align: top;
cursor: default;
}
.social-buttons .toggle-item:after,
.social-buttons .toggle-item:before {
content: '';
position: absolute;
left: -9px; top: calc(50% - 4px);
border: 4px solid transparent;
border-right: 4px solid #ccc;
}
.social-buttons .toggle-item:before {
content: '';
border-right: 4px solid #f9f9f9;
left: -8px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/ea0959dcb8.js"></script>
<ul class="social-buttons">
<li class="social-item">
<span class="btn facebook-btn" data-value="facebook">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</span>
</li>
<li class="social-item">
<span class="btn twitter-btn" data-value="twitter">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</span>
</li>
<li class="social-item">
<span class="btn google-plus-btn" data-value="google plus">
<i class="fa fa-google-plus-square" aria-hidden="true"></i>
</span>
</li>
<li class="social-item">
<span class="btn pinterest-btn" data-value="pinterest">
<i class="fa fa-pinterest-square" aria-hidden="true"></i>
</span>
</li>
<span class="toggle-item">
some text
</span>
</ul>
codepen
, непосредственно на сверстанной странице то же поведение наблюдается во всех браузерах..