jquery - Jquery切换悬停闪烁

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

只要hoverdiv 上有轻微的移动，事件就会持续触发。所以你看到了涟漪效应。

.social + .socialBttn{
    display: none;
}

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

Answer 2

这是因为当您通过 将每个迷你图像设置为可见时$.toggle()，如果您的鼠标现在悬停在其中一个图像上，它将再次.social触发 div 上的悬停事件并再次触发它以悬停在其中一个新元素上里面的.socialdiv。