JQuery toggle hover мерцает

Question

Это странно. У меня есть социальная кнопка, что, когда вы наводите на нее курсор, должны появляться социальные иконки. Это работает, но наведение мерцает.

Я захватил его, чтобы вы знали, что у меня просто плохое зрение. :) http://www.youtube.com/watch?v=4GDcfsG6Frg&feature=youtu.be

и HTML выглядит следующим образом

<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> 

и JQuery выглядит следующим образом

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

Любая помощь будет удивительно!

Answer 1

Почему не пишет CSS для того же вместо jQuery

Как hover события продолжает стрелять непрерывно до тех пор, пока есть незначительное движение за дела. Таким образом, вы видите эффект пульсации.

.social + .socialBttn{ 
    display: none; 
} 

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

Answer 2

Это происходит потому, что при установке каждого из мини-изображений в видимый через $.toggle(), если мышь в настоящее время находится над одной из этих изображений, он будет снова инициировать событие при наведении на .social DIV и запустить его один раз больше для зависания над одним из новых элементов внутри .social div.