Jquery bascule hover clignotant

Question

C'est un peu étrange. J'ai un bouton social que lorsque vous passez la souris dessus, les icônes sociales sont censées apparaître. Cela fonctionne, mais le vol stationnaire scintille.

J'ai capturé un screencast de sorte que vous savez que je n'ai pas de mauvaise vue. :) http://www.youtube.com/watch?v=4GDcfsG6Frg&feature=youtu.be

et le code HTML ressemble à ceci

<div class="social">Be Social!</div> 
<div class="socialBttn"> 
    <ul> 
     <li><img src="<?= base_url('assets/img/facebook.png') ?>" alt="" /></li> 
     <li><img src="<?= base_url('assets/img/twitter.png') ?>" alt="" /></li> 
     <li><img src="<?= base_url('assets/img/link.png') ?>" alt="" /></li> 
     <li><img src="<?= base_url('assets/img/google.png') ?>" alt="" /></li> 
    </ul> 
</div> 

et jquery ressemble à ceci

$(".social").hover(function() { 
    $(".socialBttn").toggle(); 
}); 

Toute aide serait incroyable!

Answer 1

Pourquoi ne pas rédiger CSS pour la même au lieu de jQuery

Comme l'événement hover continue à tirer en continu tant que il y a un mouvement mineur sur la div. Donc, vous voyez l'effet d'entraînement.

.social + .socialBttn{ 
    display: none; 
} 

.social:hover + .socialBttn{ 
    display: inline-block; 
} 

Answer 2

En effet, lorsque vous définissez chacun des mini-images à l'état visible via $.toggle(), si votre souris survole maintenant sur une de ces images, il déclenche l'événement de vol stationnaire à nouveau sur la .social div et de déclencher une fois plus pour planer au-dessus de l'un des nouveaux éléments à l'intérieur .social div.