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

Answer 2

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

中的一个新元素上

Jquery切换悬停闪烁

2 个答案: