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

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

.social + .socialBttn{
    display: none;
}

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